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

Question

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

非常感谢

Answer 1

他们给图像一个固定的高度和 100% 的宽度。他们将图像对齐到底部。当您缩小页面时，图像也会缩小。因此，当您缩小浏览器时，它会缩小图像。缩小发生在固定高度的底部。所以你的图像总是需要比固定高度大。您可以使用 background-size: cover 隐藏部分图像。

它将执行以下操作:

Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

这将为您解决问题:

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

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