如何在图片上使用resize属性？正确的实现方式是什么

AI 小北

2026-10-3

CSS背景图100%显示实现方案

基础用法（容器固定高度场景）

示例代码

HTML结构：

<div class="bg-box"></div>

CSS样式：

.bg-box {
  /* 自定义容器尺寸，如需占满父容器可设置 width:100%; height:100% */
  width: 100%;
  height: 500px;
  /* 替换为你的图片地址 */
  background-image: url("your-image-path.png");
  /* 核心：等比例缩放图片，完整显示在容器内，不留裁剪 */
  background-size: contain;
  /* 禁止背景重复平铺 */
  background-repeat: no-repeat;
  /* 背景居中对齐，避免侧边空白偏移 */
  background-position: center;
}

不同显示需求的属性调整

要求图片完全铺满容器，允许裁剪图片边缘不留空白：将background-size值改为cover
要求图片强制拉伸匹配容器宽高，不保留原始比例：将background-size值改为100% 100%
要求容器高度随图片比例自适应，无需固定高度：使用padding占位方案，以16:9比例的图片为例：

.bg-box {
  width: 100%;
  height: 0;
  /* 16:9比例对应值：9÷16×100% = 56.25%，其他比例按公式换算即可 */
  padding-bottom: 56.25%;
  background-image: url("your-image-path.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}