Question

我希望我的图像在窗口高度变化时调整大小，同时保持包含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必须保持块类型，因为我需要在图像的角落放置其他元素。

Answer 1

我猜你不得不诉诸JavaScript：

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

<强> JSFIDDLE

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

修改

更新了CSS类的img，使图片适合完整的div。这是working solution for the edit。

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

希望这有助于。

Answer 3

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

但是，我可以提出另一种方法，将元素放置在自动调整大小的图像的角落。您可以只浮动图像并将一些固定宽度的div浮动到图像的右侧和左侧，而不是将这些元素放置在同时保持图像的div内。然后通过设置一些负边距将这些div剪切成图像。

这是一个示例 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;
}

Answer 4

您希望将图片宽度设置为100％。使用它。

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

Answer 5

当您以％为单位提供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%;
}

Answer 6

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

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

Answer 7

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

如果是这样，请使用：

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

您可能想要使用display：block;同样，根据您的需要。

FIDDLE：http://jsfiddle.net/zhyv9/38/

Answer 8

我更新了fiddle，Img代码自我关闭，可能会导致错误...，

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

我希望这是答案，因为我已经理解了包装和重新调整尺寸，请回复，如果不工作..

Answer 9

添加这个小黑客对我有用。根据我的理解，它强制浏览器重绘/重排其内容。 Fiddle。我无法弄清楚为什么这不是由浏览器自动完成的。在Firefox，Chrome和Safari上测试。

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

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

9 个答案: