缩放 <image> 以适应 <div> 约束 - 最好不要使用背景图像答案

【问题标题】：Scale <img> to fit <div> constraints - preferred to do without background image缩放 <image> 以适应 <div> 约束 - 最好不要使用背景图像
【发布时间】：2016-06-05 11:45:05
【问题描述】：

我有一个 div 设置为窗口高度的 100%，最大宽度为窗口宽度的 66%。 html 和 body 设置为 100% 和溢出：无，因此不允许/可能滚动。

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

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

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

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

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

【问题讨论】：

如果图像没有 2:3 的比例（例如正方形）应该如何调整以保持纵横比？两边都剪了？
max-width 应该是 100%，所以它覆盖了设置为 66% 的容器本身，不是吗？如果你希望它被剪裁，那么它会变成 min-width:100%;和最小高度：100%；填充容器。容器需要溢出：也隐藏......你能澄清你的问题并放弃你的实际 HTML 结构吗？

标签： html css image

【解决方案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

【讨论】：

没有 IE 支持，遗憾的是它是不行的 :(
@Codemonkey 你能否澄清一下应该支持哪些浏览器，希望你不会提到 IE6 ;)
@Codemonkey IE 有一个 polyfill：github.com/anselmh/object-fit :)
当我可以在几行 JS 中做我想做的事情时，代码太多了！

【解决方案2】：

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

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

【讨论】：

没错，我想我有点糊涂了。但是，当纵横比允许时，您的解决方案不会“增大”图像以适应 100% 的浏览器高度。我希望图像尽可能大，不超过浏览器高度的 100% 或浏览器宽度的 66%。
这样可以让图片尽可能的高，甚至可以达到浏览器高度的100%，只要它的宽度小于浏览器宽度的66%，也就是你说的你需要。
不幸的是，不完全是。如果需要，我想放大小图像。这会限制它们，但不会缩放它们以适应。

【解决方案3】：

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

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

引用以防他的答案消失：

这是我发现的一个骇人听闻的解决方案：

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

这会将图像放大十倍，但将其限制为最终大小的 10% - 从而将其绑定到容器。

我认为非常适合我的需求。

【讨论】：

如果这对你有用，那很好。但是，我必须说你最初的问题有矛盾的要求：你想保持图形的纵横比和 100% 的高度，但这意味着你根本无法控制宽度。设置宽度也意味着您必须放弃高度或纵横比！