像普通的img标签一样调整背景图片的大小

Question

昨天，我访问了Artstation，并注意到Artstation上每个配置文件的顶部主要背景图像都有很酷的效果。如果您将窗口的大小从桌面大小向左调整并减小窗口大小，则图像将开始调整大小，并且内部大小约为1430 px，结束于内部大小约为1010 px，此后将停止调整大小。调整大小就像调整普通图像的大小一样，但这是背景图像。这种效果对于响应式设计是很好的。

我已经尝试检查CSS，但是找不到答案。谁能告诉我这是怎么做的？

这是随机选择的我正在查看的个人资料，以显示我的意思：

https://www.artstation.com/gaelleseguillon

当我尝试使用背景图片时，我使用以下代码：

.topContainerBackground
{
background-image: url(../imagesLayout/background.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: #000;
height: 600px;
width: 100%;
position: relative;
}

但是，正如我所写的，我没有获得大约1430像素内部尺寸的调整大小的东西。

Answer 1

background-size: cover;是这里的关键。 1430px没有实际意义，它是背景图像比例的函数。

当窗口真的很宽时，cover的背景大小主要是响应容器的垂直高度，从而拉伸图像使其垂直匹配。

一旦开始缩小窗口，就会出现高度不再是宽度的主要问题。那就是图像似乎开始水平缩放的地方。