Question

我可能会遗漏一些基本的东西。

HTML：

<body>
    <div class="outer">
        <div class="inner">
            <img src="http://placekitten.com/g/200/300" />
        </div>
        <div class="inner">
             <img src="http://placekitten.com/g/200/200" />
        </div>
    </div>
</body>

CSS：

html, body {
  height: 100%;
  width: 100%;
}
.outer {
  height: 30%;
  border: 1px solid #000;
}
.inner {
  position: relative;
  display: inline-block;
  height: 100%;
  border: 1px solid #f00;
}
img {
   position: relative;
   display: inline;
   height: 100%;
   width: auto;
}

Here's the preview

我想要实现的目标： 我希望两个图像都缩放到.outer div的100％高度，同时保持纵横比和我希望.inner div有它所包含的图像的宽度。

问题： 当我抓住窗户的底部并缩小尺寸时：

在Chrome中：图片和div的高度正在正确变化，但.inner divs和图片的宽度不会更新，从而导致图像更改＆＃39;长宽比。

在Firefox中：图像缩放正确，但.inner divs的宽度不会更新。

当我抓住窗户的底部并升级时：

在Chrome和Firefox中：图像都可以正确缩放，但.inner div的宽度不会更新。

Answer 1

您已将height div的.outer设置为30%的{{1}}。因此，当你收缩弓形窗口时，身体的body变得更短。最终纵横比将无法维持。

您可以将最小高度设置为height div。例如 - 190px

.outer

通过这样做，.outer { height: 30%; border: 1px solid #000; min-height: 190px; /* Add this */ } div的height将保留.outer 30% body，但这不会短于190px。

希望这个想法对你有所帮助。

在调整大小时不更新div宽度

1 个答案: