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

Question

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

我正在使用以下 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

发生这种情况是因为当您调整屏幕大小时，图像不会完全适合您指定的高度和宽度。当您将 bg 大小设置为包含行时，图像和渐变将使用所有行 space。这是一个替代方案：

@media only screen and (max-width: 500px) {
  .row{
   height:225px;
  }
}

别忘了给头部添加东西

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Answer 2

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

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

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

在不保持纵横比的情况下缩放图像可能不是理想的情况，并且即使指定了 background-size 也无法以相同的方式缩放渐变（因为那样它就不会缩放和呈现为固定大小 with/without 重复）。

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

.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>

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

Multiple background images, gradient and image, matching scale of image

html

css

image

radial-gradients