Question

我在更小的设备宽度遇到问题，其中div变得更加方形，而且景观更少。 div的背景图像设置为background-size: cover;，因此它只占据div高度的前60％和宽度的100％。

如何设置背景图像以覆盖div高度的100％，但保持其纵横比，以便切断一些背景图像。

如何对齐背景图像，使其右侧位于div的右侧（因此背景图像的左侧将被div的左侧切除）。

Answer 1

添加背景位置以设置较小设备的图像位置。

{background-position: right top;}

Answer 2

background-size的另外两个可能值是contains和cover。

contains关键字将背景图像缩放为尽可能大（但其宽度和高度都必须适合内容区域）。因此，根据背景图像和背景定位区域的比例，可能会有一些背景区域未被背景图像覆盖。

封面关键字缩放背景图像，使内容区域完全被背景图像覆盖（其宽度和高度均等于或超过内容区域）。因此，背景图像的某些部分可能在背景定位区域中不可见。

您可以根据自己的要求使用上述任何一种。

并保持宽高比使用

 {object-fit: cover}