Question

I have a background made up of an image and a gradient.

I'm using the following 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;
}

When you resize the page, the image begins to scale while the gradient stays the same size. I would like them to scale at the same time, so that you do not see the image being cut.

Answer 1

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

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

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

在不保持纵横比的情况下进行图像缩放可能不是理想的情况，即使分配了background-size，也不可能以相同的方式缩放渐变（因为它不会缩放和被渲染为固定大小，有/无重复）。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这是因为当您调整屏幕大小时，图像不符合您指定的高度和宽度。由于您已将bg大小设置为包含行将比图像大，并且渐变将使用所有行空间。这是另一种选择：

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

别忘了添加头部的东西

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

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

2 个答案: