物体贴合:封面; 替代？

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

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

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