CSS：如何使背景图像的高度为100％，并保持纵横比[重复]

Posted 2023-03-06

【中文标题】CSS：如何使背景图像的高度为100％，并保持纵横比[重复]

【英文标题】：CSS: how to make background image 100% height, and keep aspect ratio [duplicate]

【发布时间】：2018-08-18 18:32:40

【问题描述】：

我在较小的设备宽度上遇到了问题，其中 div 变得更方形，而横向更少。 div的背景图片设置为background-size: cover;，所以它只占据了div的前60%的高度和100%的宽度。

如何设置背景图片覆盖 div 的 100% 高度，但保持其纵横比，这样背景图片会被截掉。

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

【问题讨论】：

高度：100%；宽度：自动； ??哦，是的.. 并在此实例中为您的图像制作一个 div :D 或将其添加为 img

你能提供你的html吗？因为它可能需要的不仅仅是css来实现:)

不使用cover，而是使用auto 100% ...？

【参考方案1】：

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

background-position: right top;

【参考方案2】：

背景大小的另外两个可能值是包含和覆盖。

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

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

您可以根据需要使用上述任何一种。

并保持纵横比使用

 object-fit: cover