16

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

我找到了

object-fit: cover;

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

提前谢谢了 ：）

4

2 回答 2

21

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

background-size: cover;

该属性也可以接受contain值。尝试一下，你会看到不同之处。

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

cover并contain相应地支持值：

Chrome    Firefox   IE    Opera    Safari
3.0       3.6       9.0   10.0     4.1
于 2013-10-31T23:03:39.240 回答
10

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

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

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

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/

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

于 2019-06-12T14:24:38.133 回答