Object-fit:封面；替代？

Question

我在我的页面上有一个图像，我想保持其比例，但根据屏幕大小调整大小。我希望它能使宽度和高度中的较小部分恰好适合元素，而较大的尺寸会溢出元素。

我找到了

object-fit: cover; 

风格可以满足我的需要，但很快就发现对它的支持非常有限(几乎只支持opera )。还有什么我可以用来实现这一点的吗？

提前表示感谢:)

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

我也有过类似的问题。我用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/

这一逻辑适用于所有浏览器。