内部图像缩放时不调整包装 div 的大小（窗口调整大小的结果）答案

【问题标题】：Wrapping div is not resized when inner image scales (a result of window resize)内部图像缩放时不调整包装 div 的大小（窗口调整大小的结果）
【发布时间】：2013-05-13 08:40:15
【问题描述】：

我希望我的图像随着窗口高度的变化而调整大小，同时保持包含的 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 属性，它实际上会这样做。

这是fiddle（尝试调整结果面板的大小）

更新：

现在这很奇怪。自从我第一次发布这个问题以来，浏览器的行为发生了变化。最初（Chrome）当我调整窗口大小时，图像会按预期按比例缩小，但包装 div 将保持其原始宽度。现在发生的情况（Chrome 更新？）是图像不会水平缩小，而且 div 也是。

我使用最新的 Safari 和 Firefox 进行了尝试。两者都缩小图像但保持原始 div 宽度。因此，请在其他浏览器上检查您的解决方案。

更新 #2：

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

【问题讨论】：

我不知道这个jsFiddle 是不是你想要的。我用响应选项制作了全屏背景。顺便说一句，它使用 JavaScript 和 jQuery。

标签： html css responsive-design

【解决方案1】：

我猜你将不得不求助于 JavaScript：

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

JSFIDDLE

【讨论】：

是的，试图避开 js。

【解决方案2】：

你只需要保持你的形象max-height 100%。而已。

这里是Working Solution

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。这是working solution for the edit。

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

希望对您有所帮助。

【讨论】：

您可能希望在图像上设置display: block 以消除图像下添加的一些行内间距。
哎呀.. 我错过了。更新。不错的收获。 -@user1846192
完美！您能否解释一下为什么这有效而原始代码无效？您是说第一句中的max-height 还是max-width？
如果您对答案和努力感到满意，请用绿色勾号接受并投票。谢谢 - @Xyand
您的解决方案的唯一问题是 div 必须从其固有的块显示转换为内联。现在对于图像，使其成为块显示意味着它非常适合 div 内部。 max-height 和 max-width 意味着当窗口缩小时，带有图像的 div 也可以拉伸。希望这可以帮助。 - @Xyand

【解决方案3】：

您想将图像宽度设置为 100%。使用这个。

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

【讨论】：

我需要宽度与高度成正比。不是 100% 的包含元素。

【解决方案4】：

当您以 % 为 div 提供宽度和高度时，它会根据页面大小调整大小。并且以 % 表示的图像大小是相对于 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%;
}

【讨论】：

【解决方案5】：

我对你的小提琴有点尝试，但我认为浏览器不会根据其中图像的宽度改变其宽度来改变 div 的宽度，我已经尝试了一些东西，但是无法让它工作。

不过，我可以建议另一种将元素放置在自动调整大小图像的角落的方法。不用将这些元素放在同样保存图像的div 中，您可以浮动图像并将一些具有固定宽度的div 浮动到图像的左右两侧，然后制作那些@ 987654325@'s 通过在图像上设置一些负边距来切入图像。

这是一个示例 jsFiddle 演示了这种方法。当您调整结果窗口的大小（从而改变主图像的大小）时，您会看到图像停留在主图像的角落。

HTML

<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;
}

【讨论】：

这看起来是个有趣的方向。但是，最后我确实需要将它包装在一个容器中，作为更大结构（画廊）的一部分。想法？
没有想法，我认为 CSS 不会让你根据其中的图像重新调整包装元素的大小，我认为你只需要使用 JavaScript。

【解决方案6】：

您必须更新为图像目的编写的 css

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

【讨论】：

【解决方案7】：

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

如果是这样，请使用：

img {
height: 100%;
display: inline-block;
}

您可能想使用 display: block;以及，取决于您的需要。

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

【讨论】：

现在尝试调整窗口大小，看看会发生什么
图像按比例调整大小，静止。
不适用于最新的 Chrome。使用 Firefox，图像会调整大小，但包装 div 不是（我原来的问题）
使用 display: block;反而。如果需要将其定位在左侧，请使用 float: left;

【解决方案8】：

我已经更新了fiddle，Img 标签自我关闭，有时可能会导致错误..，

如果图像具有指定的大小高度和宽度，那么它也会调整大小，当我放大/缩小时，相应的 div 高度会增加/减少 90%

我希望这是答案，因为我已经理解了包装和调整大小，如果不行请回复..

【讨论】：

嗨，它并没有真正回答我的问题。
您能否说得更具体一些，如果我看到其他方式，您希望图像自动调整为 div 的大小？如果是这种情况，您必须将 JavaScript 与浏览器大小更改事件一起使用。并将父宽度分配给图像宽度
我希望使用 div（作品）重新调整图像高度的大小，并按比例设置宽度。但我希望 div 缩小并只占用图像空间。
我已经更新了小提琴：jsfiddle.net/MarmeeK/zhyv9/41 但 imge 在页脚中有 3px 透明度，其他现在可以正常工作了.. :)
对不起，调整窗口大小时图像没有缩放。

【解决方案9】：

添加这个小技巧对我有用。据我了解，它强制浏览器重绘/重排其内容。 Fiddle。我不明白为什么浏览器不能自动完成。在 Firefox、Chrome 和 Safari 上测试。

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

【讨论】：