CSS：为什么 calc(contain * 0.66) 不起作用？

Question

我有两个分层背景图像，需要使用

contain

调整大小，以便在所有响应断点处正确显示。

当我使用

percentages

指定 background-size 时，我发现图像在某些断点处被 div 边界剪切。所以我改用

contain

而不是

%

。这修复了剪辑。

但是，我还想将这些背景图像缩小到小于contain

值的100%

。

不幸的是，

background-size: calc(contain * 0.66)

似乎不起作用。

我还能如何解决这个问题？

（我不认为在图像文件本身中添加空白可以是一个解决方案，因为它们的空白也需要是响应 - 一个图像占据左上，另一个图像占据右下 div 的背景区域。div 的宽高比和面积根据浏览器窗口的大小而有很大变化。）

Answer 1

无法添加基于非数值的计算

contain

。但一个非常常见的解决方法是使用伪元素来模仿背景图像。然后你就可以更好地控制伪元素的尺寸，这是一个例子：

您可以尝试调整左下角容器的大小来查看效果

div {
  position: relative;
  resize: both;
  overflow: hidden;
  width: 200px;
  height: 160px;
  border: solid 1px black;
  background-color: gray;
  transform-style: preserve-3d;
}

div::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3D(-50%, -50%, -1px);
  width: 66%;
  height: 66%;
  background: url(https://picsum.photos/640/480) center/contain no-repeat;
}

<div></div>