在不影响比例的情况下调整背景图像大小答案

【问题标题】：Resize Background Image without affecting the proportion在不影响比例的情况下调整背景图像大小
【发布时间】：2021-01-17 02:42:43
【问题描述】：

我正在尝试使用背景图像制作滑块，当我尝试使其适合移动屏幕时，比例会受到影响并且看起来像像素，我如何调整背景图像的大小以适应移动屏幕而不影响比例。

当我将height 增加到：

background-size: 100vw 55vh !important;
height: 55vh !important;

【问题讨论】：

【解决方案1】：

不要同时固定图像的高度和宽度，只需定义您需要的一个（例如宽度）并将另一个设置为auto。对于高度：

background-size: auto 55vh;
height: 55vh;

这样会保持原始图像的比例，避免图像失真。

【讨论】：

【解决方案2】：

您可以使用 object-fit 属性来保持图像的纵横比：

img {
height: 55vh
object-fit: contain;
}

contain - 被替换的内容被缩放以保持其纵横比，同时适合元素的内容框。

【讨论】：

【解决方案3】：

你可以使用这个 CSS：

{
    background-size: contain;
    background-repeat: no-repeat;
}

如果它不起作用，请分享您的代码。我知道我可以帮助你。

【讨论】：