适合对象：封面；选择？ [复制]

Question

我的页面上有一张图片，我想保持其比例，但会根据屏幕尺寸调整大小。我希望它使宽度和高度中的较小者完全适合元素，而较大的尺寸会溢出元素。

我找到了

object-fit: cover; 

适合我需要的风格，但很快发现对此的支持非常有限（几乎仅限于歌剧）。还有什么我可以用来实现这一点的吗？

提前非常感谢:)

Answer 1

如果您能够将此图像作为背景添加到页面中，那么您可以使用：

background-size: cover;

该属性也可以接受contain 值。尝试一下，你会发现不同的。

cover 强制图像填充整个容器。这意味着如果图像的比例与容器的比例不匹配，图像将被裁剪。
contain 强制图像适合容器。这意味着图像永远不会超出容器的范围。如果比例（图像和容器）不同，则图像两侧（左右或上下）会有空格。

相应地支持cover 和contain 值：

Chrome    Firefox   IE    Opera    Safari
3.0       3.6       9.0   10.0     4.1

Answer 2

我有类似的问题。我用 just CSS 解决了它。

基本上Object-fit: cover 在 IE 中不起作用，它占用 100% 的宽度和 100% 的高度，并且纵横比失真。换句话说，我在 chrome 中看到的图像缩放效果不存在。

我采用的方法是使用 absolute 将图像放置在容器内，然后使用以下组合将其放在中心：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

一旦它在中心，我给图像，

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

这使得图像得到Object-fit:cover的效果。

---

这里是上述逻辑的演示。

https://jsfiddle.net/furqan_694/s3xLe1gp/

此逻辑适用于所有浏览器。