当内部图像缩放时，不调整div的大小(窗口大小调整的结果)

我希望我的图像随着窗口高度的变化而调整大小，同时保持包含div收缩包装图像。我试着使用:

<div>
    <img src="http://akamaicovers.oreilly.com/images/9780596806767/cat.gif" alt="">
</div>
html, body {
    height: 100%;
    width: 100%;
}
div {
    height: 90%;
    background-color: black;
    display: inline-block;
}
img {
    height: 100%;
    width: auto;
}

但它似乎没有像预期的那样工作。div不会收缩。当我在调试器中使用css属性时，它实际上是这样做的。

这是小提琴(尝试调整结果面板的大小)

更新:

这就奇怪了。自从我第一次发布这个问题，浏览器的行为改变了。原来(Chrome)，当我调整窗口的大小，图像将按比例缩小，但包装div将保持其原有的宽度。现在发生了什么(Chrome更新?)是图像不会水平缩小，和div也。

我用最新的Safari和Firefox试过。两者都缩小图像，但保持原来的div宽度。所以请在其他浏览器上检查一下你的解决方案。

更新# 2:

div必须保持块类型，因为我需要在图像的角落放置其他元素。

我想你不得不求助于JavaScript:

$(window).on('resize', function (){ 
    $('div').width($('img').width());
});

JSFIDDLE

你只需要保持你的图像max-height为100%。这是它。

这是工作解决方案

HTML:

<div>
    <img src="http://akamaicovers.oreilly.com/images/9780596806767/cat.gif" alt="">
</div>

CSS:

html, body {
    height: 100%;
    width: 100%;
}
div {
    height: 90%;
    background-color: black;
    display: inline;
}
img {
    max-height: 100%;
    max-width: 100%;
    height: 100%;
}

编辑

为img类更新了CSS，使图像适合完整的div。以下是编辑的工作解决方案。

img {
    max-height: 100%;
    max-width: 100%;
    height: 100%;
    display:block;
}

我有一点去你的fiddle，但我不认为浏览器会改变一个div的宽度基于图像内部的宽度改变它的宽度，我已经尝试了一些事情，但不能让它工作。

然而，我可以建议另一种方法将元素放置在自动调整大小的图像的角落。而不是把这些元素放在div里面，它也保存着图像，你可以浮动图像，浮动一些div的固定宽度到图像的左右，然后让这些div通过设置一些负边距切入图像。

下面是一个示例jsFiddle来演示这种方法。当您调整结果窗口的大小(从而改变主图像的大小)时，您将看到图像保留在主图像的角落里。

<div class="right">
    <img src="..." />
    <img src="..." />
</div>
<img src="http://akamaicovers.oreilly.com/images/9780596806767/cat.gif" alt="" />
<div class="left">
    <img src="..." />
    <img src="..." />
</div>

CSS

html, body { height: 100%; width: 100%; } img { height: 90%; float: left; } div { float: left; width: 40px; position: relative; z-index: 1; height: 90%; } div.left { margin-left: -40px; } div.right { margin-right: -40px; } div > img { padding: 3px; border: 2px dashed blue; width: 30px; height: 30px; } div > img:last-child { bottom: 0px; right: 0px; position: absolute; }

你想给你的图像宽度为100%。使用这个。
img { height: 100%; width: 100%; }

当您为div in %提供宽度和高度时，它会根据页面大小调整大小。图像的大小在%是相对于div的宽度和高度。我保持div的高度为可用空间的90%，宽度为50%。图像的高度和宽度都是90%，这样你就可以看到图像和div部分的大小调整。

html, body { height: 100%; width: 100%; } div { height: 90%; background-color: black; width:50%; } img { height: 90%; width: 90%; }

你必须更新你的css为图像的目的

img { max-height: 100%; max-width:100%; }

如果我理解正确，您想按高度调整图像大小，但保持比例大小?
如果是，使用:

img { height: 100%; display: inline-block; }
你可能想使用display: block;也可以，根据你的需要。

小提琴:http://jsfiddle.net/zhyv9/38/

我已经更新了fiddle，与Img标签自我关闭，有时可能会导致错误。
和
如果图像已经指定了大小，高度和宽度，那么它也会调整大小，当我放大/缩小
时，相应的div高度增加/减少90%
我希望这是答案，因为我已经理解了包装和调整大小，

添加这个小hack对我很有效。据我所知，它迫使浏览器重新绘制/回流其内容。小提琴。我不明白为什么这不是由浏览器自动完成。已在Firefox, Chrome和Safari上测试。

window.onresize = function() { $(".thumb").each(function() { this.style.display = "none"; this.offsetWidth; this.style.display= "inline-block"; }) }

相关内容

最新更新

热门标签：