如何利用HTML实现背景图按比例平铺_通过CSS background-size:contain-html教程-PHP中文网

background-size: contain 不能平铺，因其语义是完整缩放不裁剪不重复，与 repeat 互斥；真正实现等比缩放后平铺需用 background-size 配合数值或 auto 与 repeat-x/y 组合。

如何利用html实现背景图按比例平铺_通过css background-size:contain

background-size: contain 不能实现平铺，这是根本性误解

很多人搜“background-size: contain 平铺背景图”，结果页面白屏或图片只显示一次——因为 contain 的语义是“完整缩放至容器内可见，不裁剪、不重复”，它和 repeat 是互斥的。你要的是“按比例缩放后平铺”，不是“缩放到刚好装下”。直接用 contain 加 background-repeat: repeat，浏览器会优先尊重 contain，忽略 repeat，最终只渲染一张缩放后的图。

真正能按比例平铺的方案：background-size 配合数值或 cover/contain 的替代思路

想让背景图等比缩放后无缝铺满整个容器（比如 banner 区域随屏幕拉伸仍保持清晰），核心是控制缩放比例 + 启用重复。常见可行路径有：

background-size: 100% 100%：强制拉伸填满，但会失真（非等比）
background-size: auto 100% 或 100% auto：保持宽高比，单向拉伸，另一方向自动适配，再配合 background-repeat: repeat-x 或 repeat-y
最接近需求的做法：background-size: <em>[固定像素值]</em> auto（如 200px auto），然后设 background-repeat: repeat —— 这样图按宽度缩放到 200px，高度等比计算，再横向/纵向重复
如果必须基于原始图宽高比动态计算：需 JS 获取 image.naturalWidth / naturalHeight，再设置 background-size 数值，纯 CSS 无法获取图片原始尺寸

常见错误现象：contain + repeat 为什么没反应

写成这样：

div {
  background-image: url(bg.jpg);
  background-size: contain;
  background-repeat: repeat;
}

实际效果是：只显示一张居中、等比缩放的图，其余区域空白。原因在于 W3C 规范明确指出，当 background-size 为 contain 或 cover 时，background-repeat 的行为被覆盖，浏览器会忽略 repeat 值，强制使用 no-repeat 语义。这不是 bug，是设计如此。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

更实用的替代：用伪元素 + object-fit 模拟“可平铺的 contain”

如果你需要视觉上“像 contain 那样等比缩放，又能铺满”，又不想手动算尺寸，可以用 ::before 伪元素加载图片，配合 object-fit: contain 和绝对定位模拟背景。虽然不算纯 background，但可控性强：

div {
  position: relative;
}
div::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url(bg.jpg);
  background-size: auto 100%;
  background-repeat: repeat-x;
  z-index: -1;
}

注意点：