对象适合：替代？ [英] Object-fit: cover; alternative?

问题描述

我在我的页面上有一个图像，我想保持比例，但根据屏幕大小调整大小。我想这样，使得宽度和高度中的较小者被精确地拟合元件，并且较大的尺寸溢出元件。

I have an image on my page that I want to keep the ratio of but resize according to screen size. I would like it so that the smaller of the width and height is made to fit the element exactly, and the larger dimension overflows the element.

我发现

object-fit: cover; 

风格，这将适合我的需要，但很快发现支持这是非常有限歌剧）。

style which would suit my needs but very quickly found out that support for this is extremely limited (pretty much opera only). Is there anything else I can use to achieve this?

提前感谢：）

推荐答案

如果您能够将此图片作为背景添加到网页，则可以使用：

If you're able to add this image to the page as a background, then you can use:

background-size: cover;

此属性还可以接受包含值。

This property can also accept contain value. Experiment with both a bit and you'll see the difference.

cover 强制图像填充整个容器。这意味着如果图片的比例与容器的比例不匹配，则会裁剪图片。

包含会强制图片适合在容器中。这意味着图像永远不会出去容器的边界。如果比率（图片和容器）不同，则图片两侧会有空格（左侧和右侧或顶部和底部）。

cover forces the image to fill the whole container. It means the image will be cropped if its ratio doesn't match the container's ratio.
contain forces the image to fit in the container. It means that image will never go out the bounds of the container. If ratios (image and container) are different, there will be blank spaces on the sides of the image (left & right or top & bottom).

覆盖和包含值是相应支持的：

Chrome    Firefox   IE    Opera    Safari
3.0       3.6       9.0   10.0     4.1

这篇关于对象适合：替代？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！