<分区>
我的页面上有一张图片，我想保持其比例，但要根据屏幕尺寸调整大小。我希望它能使宽度和高度中较小的一个完全适合元素，而较大的尺寸会溢出元素。
我找到了
object-fit: cover;
风格适合我的需要，但很快发现对此的支持非常有限(仅限歌剧)。还有什么我可以用来实现这个目标的吗？
提前致谢:)
<分区>
我的页面上有一张图片，我想保持其比例，但要根据屏幕尺寸调整大小。我希望它能使宽度和高度中较小的一个完全适合元素，而较大的尺寸会溢出元素。
我找到了
object-fit: cover;
风格适合我的需要，但很快发现对此的支持非常有限(仅限歌剧)。还有什么我可以用来实现这个目标的吗？
提前致谢:)
最佳答案
如果您能够将此图像作为背景添加到页面，那么您可以使用:
background-size: cover;
此属性还可以接受contain 值。稍微尝试一下，您会发现不同之处。
cover 强制图像填满整个容器。这意味着如果图像的比例与容器的比例不匹配，图像将被裁剪。
contain 强制图像适合在容器中。这意味着图像永远不会超出容器的范围。如果比例(图像和容器)不同，则图像两侧(左右或上下)会有空白。
cover 和 contain 值得到相应的支持:
Chrome Firefox IE Opera Safari
3.0 3.6 9.0 10.0 4.1
关于html - 适合对象 : cover; alternative?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19717622/