html – Object-fit：cover;替代？

我在我的页面上有一个图像,我想保持比例,但调整大小根据屏幕大小.我想要这样做,使得较小的宽度和高度被精确地适合元素,并且较大的维度溢出元素.

我找到了

object-fit: cover;

风格符合我的需求,但很快就发现,对此的支持非常有限(几乎只有歌剧).还有什么我可以用来实现这一点吗？

提前谢谢了 ：)

解决方法

如果您可以将此图像作为背景添加到页面,则可以使用：

background-size: cover;

此属性也可以接受包含值.尝试一下,你会看到差异.

盖子强制图像填满整个容器.这意味着如果图像的比例与容器的比例不匹配,则会裁剪图像.
包含迫使图像适合容器.这意味着图像永远不会超出容器的边界.如果比例(图像和容器)不同,则图像侧面将留有空格(左和右或顶部和底部).

覆盖和包含值被相应支持：

Chrome    Firefox   IE    Opera    Safari
3.0       3.6       9.0   10.0     4.1

原文地址：https://www.jb51.cc/html/229500.html