background-size: cover与background-size: contain

background-size的可能值

background-size的可能值是auto, contain, 和cover.

1、background-size: cover

在这里，图像将被调整大小以适应容器。如果长宽比不一样，那么图像将被屏蔽以适应。

当使用background-size: cover时，请确保考虑图像的长宽比。

2、background-size: contain

在这种情况下，图像将被调整大小以适应容器。如果长宽比不对，那么图像就会被黑边化，如下例所示。

background-size: contain 调整图像的大小以适应容器。

至于background-position，它类似于object-position的工作方式。唯一的区别是，object-position的默认位置与background-position的默认位置不同。

3、background-size: auto

使用auto，图像将保持其默认大小。

请记住，默认尺寸有时可能会导致图像模糊（如果它太小）。

 

 

 

 

---

感谢您的阅读，如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮。本文欢迎各位转载，但是转载文章之后必须在文章页面中给出作者和原文连接。