我在我的页面上有一个图像,我想保持比例,但调整大小根据屏幕大小.我想要这样做,使得较小的宽度和高度被精确地适合元素,并且较大的维度溢出元素.
我找到了
object-fit: cover;
风格符合我的需求,但很快就发现,对此的支持非常有限(几乎只有歌剧).还有什么我可以用来实现这一点吗？
提前谢谢了 ：)
解决方法
@H_403_13@ 如果您可以将此图像作为背景添加到页面,则可以使用：background-size: cover;
此属性也可以接受包含值.尝试一下,你会看到差异.
盖子强制图像填满整个容器.这意味着如果图像的比例与容器的比例不匹配,则会裁剪图像.
包含迫使图像适合容器.这意味着图像永远不会超出容器的边界.如果比例(图像和容器)不同,则图像侧面将留有空格(左和右或顶部和底部).
覆盖和包含值被相应支持：
Chrome Firefox IE Opera Safari 3.0 3.6 9.0 10.0 4.1
