Html 站点样式-在调整大小之前未显示图像的一部分

在这个网站上，会显示主标题图片，当您通过x轴调整页面大小时，会显示图片顶部，显示调整大小后图片的完整大小。谁能告诉我这是如何实现的，因为我计划在一个网站上使用这种方法

---

非常感谢

使用CSS属性完成背景大小：封面它们为图像提供了固定的高度和100%的宽度。它们将图像与底部对齐。缩小页面时，图像也会缩小。因此，当您缩小浏览器时，它将缩小图像。从固定高度的底部开始缩放。因此，您的图像总是需要比固定高度更大。可以使用“背景大小：封面”隐藏部分图像

它将执行以下操作：

缩放背景图像，使其尽可能大，以便背景区域完全被背景图像覆盖。背景图像的某些部分可能在背景定位区域内看不到

这将为您带来好处：

HTML:

---

你可以很容易地改变它。如果要从底部显示图像的某些部分，只需从底部到顶部更改背景位置

这是通过使用at规则实现的。在这种情况下，图像通过宽度为100%来改变大小，因此它始终是页面宽度的100%，但高度通过at规则来改变。在这个网站上，这是通过添加

@media screen and (max-width:840px) {
    #header {
        height: 550px; 
    }
    /*other styling for screens of 840px wide and smaller*/
}
@media screen and (max-width:760px) {
    #header {
        height: 400px;
    }
    /*other styling for screens of 760px wide and smaller*/
}
/*etc*/

这使得

#标题

图像的高度根据屏幕大小而变化。您还可以通过屏幕宽度平滑调整图像的高度，只需添加

height:auto而不是在不同屏幕大小下的不同高度

PS：我建议使用Google Chrome，或Firefox与，这样你就可以自己看到这些东西（如果你有一些web开发经验的话）

#headerimage {
    width: 100%;
    height: 600px;
    background-image: url(header.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    position: relative;
}

@media screen and (max-width:840px) {
    #header {
        height: 550px; 
    }
    /*other styling for screens of 840px wide and smaller*/
}
@media screen and (max-width:760px) {
    #header {
        height: 400px;
    }
    /*other styling for screens of 760px wide and smaller*/
}
/*etc*/