网站样式 - 部分图像在调整大小之前不显示答案

【问题标题】：Site styling - part of image not shown until resize网站样式 - 部分图像在调整大小之前不显示
【发布时间】：2014-01-16 19:39:37
【问题描述】：

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

非常感谢

【问题讨论】：

标签： html css image resize

【解决方案1】：

使用 CSS 属性 background-size: cover 完成

【讨论】：

【解决方案2】：

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

它将执行以下操作：

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

这将为您解决问题：

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

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

【讨论】：

【解决方案3】：

这是通过使用@media 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*/

这会使#header 图像根据屏幕尺寸改变高度。您还可以通过屏幕宽度平滑调整图像的高度，只需添加height:auto;，而不是在不同的屏幕尺寸下添加不同的高度。

PS：我建议使用 Google Chrome 或 Firefox 与 firebug 结合使用，这样您就可以自己查看这些内容（如果您有一些 Web 开发经验）。

【讨论】：