html - 多张背景图片，渐变和图片，匹配图片比例

Question

我有一个由图像和渐变组成的背景。

http://codepen.io/anon/pen/RWrKGv

我正在使用以下 CSS:

.row {
  display: block;
  width: 50%;
  min-height: 150px;
  min-height: 750px;
  background: -webkit-radial-gradient( 50% 50%, circle farthest-side, rgb(201, 2, 10) 0%, rgb(0, 0, 0) 100%), url("https://dl.dropboxusercontent.com/u/11795964/deer-antlers.jpg");
  background-blend-mode: multiply;
  background-size: contain;
  background-position: 0 0;
  background-repeat: no-repeat;
}

当您调整页面大小时，图像开始缩放，而渐变保持相同大小。我希望它们同时缩放，这样您就不会看到被剪切的图像。

Answer 1

渐变不会缩放，因为容器元素的尺寸决定了渐变的大小。因此，无论页面大小是否调整，元素(以及渐变)都是 750px 高。 (请注意，您有两个 min-height 设置，因此后者会覆盖前者)。您可以找到有关渐变图像大小计算的更多信息 in my answer here .

现在来看图像，即使您已将 background-size 设置为 contain(这也是渐变的默认大小)，图像仍具有固有的宽高比，因此它们会自动缩放，使其高度和宽度可以适应背景定位区域，同时保持其宽高比。因此，随着元素宽度的变化(这是由于容器上的 50% 宽度设置而发生的)，图像的高度也会发生变化以保持比例不变。

所以，简而言之，您当前的设置不会达到您想要的效果，因为 (a) 渐变不会在高度上缩放，因为它没有固有的纵横比(而且就我而言无法设置一个)我知道)和(b)图像将缩放。

在不保持纵横比的情况下缩放图像可能不是理想的情况，并且即使为它分配了 background-size (因为那样它也不会' t 缩放并呈现为固定大小，有/没有重复)。

在我看来，最好的解决方法是分配容器的尺寸，使其始终与其将容纳的图像尺寸成比例。例如，在下面的代码片段中，我使用了一张 500 像素宽 x 750 像素高的图像，因此我将容器的高度和宽度分别指定为 100vh 和 150vh .这意味着当视口(viewport)的高度发生变化时，容器的高度和宽度都会发生变化。这反过来意味着即使图像被缩放，其宽高比也与容器相匹配，因此将占据全部可用空间。

.row {
  display: block;
  width: 100vh;
  min-height: 150vh;
  background: -webkit-radial-gradient(50% 50%, circle farthest-side, rgb(201, 2, 10) 0%, rgb(0, 0, 0) 100%), url("http://lorempixel.com/500/750/nature/1");
  background: radial-gradient(circle farthest-side at 50% 50%, rgb(201, 2, 10) 0%, rgb(0, 0, 0) 100%), url("http://lorempixel.com/500/750/nature/1");
  background-blend-mode: multiply;
  background-size: contain;
  background-position: 0 0;
  background-repeat: no-repeat;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="row">
</div>