Question

我的div设置为窗口高度的100％，窗口宽度的最大宽度为66％。 html和body设置为100％而overflow：none，所以没有允许/可能的滚动。

我希望能够缩放任意<img>以尽可能多地填充空间。由于现有的JS代码与<img>元素交互，我不想使用背景图像。

这似乎是一个明显的起点：

<img style="height:100%;max-width:66%">

但最大宽度似乎来自浏览器高度的一定百分比，而不是宽度。并且它不会保持其宽高比，这绝对是一种不受欢迎的效果！

我可以使用JS来完成这项任务，但如果有的话，更喜欢CSS解决方案吗？看起来它应该很简单，但我感觉它不是......

Answer 1

您可以使用css属性object-fit。

<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />
.cover {
  object-fit: cover;
  width: 50px;
  height: 100px;
}

请参阅此处的示例：http://codepen.io/afonsoduarte/pen/EaOROW

Answer 2

如果img在div范围内，那么它使用的div宽度的66％，已经是body宽度的66％我理解正确。您还可以通过在CSS中设置img {width: auto; max-width: 100%;}来保持图像自动调整大小并保持其宽高比，保持高度不变。

在元素上设置基于百分比的宽度时，宽度通常根据元素父级的宽度计算，这就是为什么图像看起来比预期的要小。

Answer 3

我在这里找到了一个我喜欢的答案：

https://stackoverflow.com/a/26648877/1058739

引用以防他的回答消失：

这是我发现的一个黑客解决方案：

#image {
    max-width: 10%;
    max-height: 10%;
    transform: scale(10);
}

这会将图像放大十倍，但将其限制在最终尺寸的10％ - 从而将其限制在容器中。

我认为这完全符合我的需要。

缩放<img/>以适合<div>约束 - 首选没有背景图像

3 个答案: