使裁剪后的图像在CSS中响应

Question

信息：我的网页顶部有一个裁剪的图像用作背景图像。在CSS中，我以px为单位定义了包含图片的div的大小-正在裁剪图片。 （我正在Squarespace中进行此操作）。因此，当您进入页面时，您会看到背景图像（和一些文本）填满整个屏幕，然后向下滚动图像。

问题：当我减小Web浏览器窗口的大小时，div当然会保持相同的px高度。这意味着图像最终在大多数页面中都是背景-我只希望当您进入页面时该图像位于顶部。

问题：如何使裁剪div的高度响应？据我研究，我只能以px为单位设置该值，该值对响应不友好...以下代码基于我的外部屏幕尺寸。因此，对于大屏幕，我需要该高度px。

我的代码：

.header-background {
   position: absolute;
   top: -160px;
   left: -335px;
   right: -335px;
   height: 850px;  
   z-index: -1;
   overflow: hidden;
   background-size: cover;
   background-position: center;
   background-image: img src('/s/Sams-sort.png')

Answer 1

将其释放到仅占据较大空间的自由高度高度：自动