为何background-size: calc(contain * 0.66)无法生效？求替代方案

因为contain是CSS关键字而非数值，所以calc(contain * 0.66)无法生效，这里给你两种靠谱的实现思路，都能满足响应式需求且不用修改图片文件：

方法一：伪元素单独承载背景+transform缩放（推荐） #

利用伪元素分别包裹两张背景图，通过transform: scale(0.66)实现缩放，同时配合transform-origin保证定位准确：

.container {
  position: relative;
  width: 100%;
  height: 50vh; /* 示例高度，根据你的需求调整 */
  /* 容器本身不需要设置背景 */
}

/* 左上角背景图 */
.container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('你的左上背景图路径');
  background-size: contain;
  background-repeat: no-repeat;
  transform: scale(0.66);
  transform-origin: top left; /* 以左上角为缩放原点，避免缩放后位置偏移 */
  pointer-events: none; /* 不干扰容器内其他元素的交互 */
}

/* 右下角背景图 */
.container::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url('你的右下背景图路径');
  background-size: contain;
  background-repeat: no-repeat;
  transform: scale(0.66);
  transform-origin: bottom right; /* 以右下角为缩放原点 */
  pointer-events: none;
}

这个方法的核心逻辑是：伪元素和容器同宽高，background-size: contain让背景图在伪元素内完整显示，再通过scale(0.66)把整个伪元素（包括背景图）缩小到原来的66%，transform-origin确保缩放后背景图依然紧贴对应角落，完全适配容器的响应式变化。

方法二：利用CSS变量结合媒体查询（适合需要更精细控制的场景） #

如果不想用transform，可以提前计算不同断点下contain对应的实际尺寸，用CSS变量存储并设置为background-size：

• 先在不同断点下，通过浏览器开发者工具查看background-size: contain时的实际像素值
• 将这些值乘以0.66后，用CSS变量定义，再应用到背景图上

示例代码：

.container {
  --bg-size-xs: 200px 150px; /* 移动端contain尺寸*0.66的结果 */
  --bg-size-md: 300px 225px; /* 平板端的结果 */
  --bg-size-lg: 400px 300px; /* 桌面端的结果 */
  
  background-image: url('左上背景图'), url('右下背景图');
  background-position: top left, bottom right;
  background-repeat: no-repeat;
  background-size: var(--bg-size-xs);
}

@media (min-width: 768px) {
  .container {
    background-size: var(--bg-size-md);
  }
}

@media (min-width: 1200px) {
  .container {
    background-size: var(--bg-size-lg);
  }
}

但这个方法需要手动适配每个断点，不如伪元素方法灵活，适合对尺寸有精确要求的场景。

内容的提问来源于stack exchange，提问作者Mentalist