Question

在此网站http://www.vicetone.com/上，显示主标题图片，当您通过x轴调整页面大小时，图片的顶部会显示，在调整大小时显示图片的完整大小。有人可以告诉我pn是如何实现的，因为我打算在网站中使用这种方法。

非常感谢

Answer 1

它们为图像提供固定的高度和100％的宽度。它们将图像对齐到底部。缩小页面时，图像也会缩小。因此，当您缩小浏览器时，它会缩小图像。按比例缩小从固定高度的底部发生。因此，您的图像始终需要大于固定高度。您可以使用background-size隐藏部分图像。

它将执行以下操作：

将背景图像缩放到尽可能大，以使背景区域完全被背景图像覆盖。背景图像的某些部分可能不在背景定位区域中的视野中

这将为您解决问题：

HTML：

<div id="headerimage"></div>

CSS：

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

您可以轻松更改其中的内容。如果要从底部显示部分图像，只需从底部到顶部更改背景位置即可。

Answer 2

使用CSS属性background-size: cover

完成

Answer 3

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

来完成的

@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*/

这会使#header图像更改高度取决于屏幕大小。您还可以通过屏幕宽度平滑地调整图像的高度，只需添加height:auto;而不是不同屏幕尺寸的不同高度。

PS：我建议将谷歌浏览器或Firefox与firebug结合使用，以便您可以自己查看这些内容（如果您有一些网络开发经验）。

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

3 个答案: