CSS 背景图等比例缩小 - 使用 background-size 属性

可以使用 'background-size' 属性来实现背景图等比例缩小的效果。

'background-size' 属性可以设置背景图的大小，常见的属性值有：

• 'cover'：等比例缩放背景图，使其完全覆盖容器。可能会有部分背景图内容被裁剪。
• 'contain'：等比例缩放背景图，使其完全适应容器。可能会有容器部分区域没有被背景图填充。

示例代码如下：

.container {
  width: 400px; /* 容器的宽度 */
  height: 200px; /* 容器的高度 */
  background-image: url('background.jpg'); /* 背景图的路径 */
  background-size: contain; /* 背景图等比例缩小适应容器 */
  background-repeat: no-repeat; /* 不重复平铺背景图 */
  background-position: center center; /* 背景图居中显示 */
}

在上面的示例中，容器的宽度为 400px，高度为 200px，背景图等比例缩小后会完全适应容器。背景图的路径可以根据实际情况进行修改。