如何使 CSS 背景图像适合宽度并按比例自动缩放高度？

CSS 背景图片适合宽度、高度按比例自动缩放

问题

CSS 中，设置背景图片宽度相等设置页面宽度和高度以保持图像的比例可能会带来挑战，特别是在垂直裁剪和图像方面

解决方案：background-size: cover

CSS3提供了background-size属性，可以控制图像的大小。通过设置background-size: cover，您可以将图像缩放到完全覆盖背景定位区域的最小尺寸，同时保持宽高比。

body {
    background-image:    url(images/background.svg);
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;              /* optional, center the image */
}

此设置可确保背景图像覆盖页面的宽度，并且其高度会相应缩放，从而实现所需的响应能力和裁剪行为。

contain 和 cover 的比较

background-size 属性提供两个附加值，contain 和 cover，它们提供不同的缩放行为：

• contain：确保图像适合背景定位区域而不裁剪，从而导致空白空间可见
• cover：确保图像覆盖整个背景定位区域，从而可能将图像裁剪为适合。

视觉比较

考虑下图显示在边框内。 contains 确保图像在框中完全可见，而 cover 用图像填充框，从而导致底部裁剪：

[具有包含和封面背景大小设置的图像图像]

现场演示

以下代码演示了contain和cover的区别：

<div><div class="contain"></div>
<p>Note the grey background. The image does not cover the whole region, but it's fully contained.</p>
</div>
<div><div class="cover"></div>
<p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image covers all of the <code><div></code>.</p>
</div>

以上是如何使 CSS 背景图像适合宽度并按比例自动缩放高度？的详细内容。更多信息请关注PHP中文网其他相关文章！