CSS 背景图重新调整大小始终保持比例并以中心点缩放

在本文中，我们将介绍如何使用CSS将背景图重新调整大小，以便始终保持比例并以中心点缩放。这个功能在响应式设计中非常有用，可以使我们的网页在不同设备上呈现出更好的用户体验。

阅读更多：CSS 教程

CSS 中的背景图尺寸属性

在CSS中，我们可以使用background-image属性来设置背景图像，并使用background-size属性来调整背景图的尺寸。background-size属性有几个值可以使用，其中包括：

auto: 图片按原始尺寸显示，不进行任何缩放。
cover: 图片将会被缩放以填充整个背景区域，可能会截断图像。
contain: 图片将会被缩放以适应整个背景区域，不会截断图像。
length: 可以指定具体的长度值，如px、em等。
percentage: 可以指定具体的百分比值，相对于父元素的尺寸。例如50%表示相对于父元素宽度的50%。

等比例缩放背景图

要实现等比例缩放的背景图，我们可以使用background-size属性以及percentage值。例如，我们可以设置background-size: 100% auto;来保持图片的宽度始终等于父元素的宽度，并根据宽高比例缩放高度。

.container {
  width: 500px;
  height: 300px;
  background-image: url("path/to/image.jpg");
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
}

在上面的示例中，.container类表示一个具有固定尺寸的容器，其中包含一张背景图。通过设置background-size: 100% auto;，我们确保图片的宽度始终等于容器的宽度。图像的高度将根据宽高比例自动调整。

以中心点缩放背景图

要在缩放背景图时以中心点为参考，我们可以使用background-position属性。我们可以将background-position设置为center，这样背景图将以容器的中心点为参考进行缩放。

.container {
  width: 500px;
  height: 300px;
  background-image: url("path/to/image.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

在上面的示例中，background-size被设置为cover，这意味着背景图将被等比例缩放以覆盖整个容器。同时，background-position被设置为center，这样背景图将以容器中心为参考进行缩放。

多个背景图的调整

在CSS中，我们还可以使用多个背景图，并分别对它们进行大小和位置的调整。可以通过在background-image和background-size属性中指定多个值来实现这一点。

.container {
  width: 500px;
  height: 300px;
  background-image: url("path/to/image1.jpg"), url("path/to/image2.jpg");
  background-size: 100% auto, cover;
  background-position: center, top right;
  background-repeat: no-repeat, no-repeat;
}

在上面的示例中，.container类将同时使用两个背景图。第一个背景图将等比例缩放以适应容器的宽度，并且其高度将根据宽高比例自动调整。第二个背景图将以容器的右上角为参考进行缩放，并且不会被重复。