如何创建响应式缩放的 CSS 背景图像而不出现裁剪或对齐问题？

按比例缩放的响应式 CSS 背景图像

CSS 中的背景图像通常很难使用，特别是当您希望它们响应式缩放以适应不同的屏幕尺寸时并保持正确的纵横比。让我们探讨一下如何使用background-size属性来实现这种效果。

问题：裁剪和对齐问题

当使用background: url()指定背景图片时，您可能会遇到以下相关问题裁剪和对齐。 Firefox 可能会优先考虑高度缩放，从而导致垂直裁剪，而 Chrome 可能会将图像居中而不是重复。

解决方案：background-size: cover

要解决这些问题，我们可以使用背景尺寸属性与封面相结合值：

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

兼容性：
在此处检查背景大小属性的兼容性：[CSS 技巧](https://css-tricks.com/css3- background-size/)

解释包含和覆盖

覆盖值将背景图像缩放到完全覆盖背景定位区域的最小尺寸，保持其纵横比。这可确保图像填充整个空间，没有任何空白或裁剪区域。

相反，包含值将图像缩放到适合背景定位区域的最大尺寸，同时保留其纵横比。这可能会导致图像周围出现空白区域。

视觉演示

考虑将 4x3 图像用作 16x9 屏幕的背景。

包含：

• 图像适合屏幕内部，无需裁剪，但有其上方和下方的空白区域。

封面：

• 图像被缩放以垂直覆盖整个屏幕，同时裁剪掉两侧.

有关更详细的演示，请查看此代码剪断：

<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 div.</p>
</div>

以上是如何创建响应式缩放的 CSS 背景图像而不出现裁剪或对齐问题？的详细内容。更多信息请关注PHP中文网其他相关文章！