这里是上述逻辑的演示。

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％的高度，并且宽高比失真。换句话说，我没有在镀铬中看到的图像缩放效果。

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

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/

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

物体贴合：封面;替代？

2 个答案:

这里是上述逻辑的演示。