Question

无论屏幕的宽度如何，都可以确保图像以全宽（或完全覆盖屏幕）以一定的固定高度显示。如果我要设置width: 100%;和height: auto;，显然高度会随着屏幕的宽度而波动。如果屏幕较窄，图像是否仅部分显示无关紧要。有什么想法吗？

编辑：这是一个很好的例子：http://www.teamnine.ch

尝试重新调整浏览器窗口大小，看看我的意思。

Answer 1

从源网站上可以看出，它们具有min-height属性集。因此，你得到的结果就是这样。在您想要的页面上，请尝试使用以下CSS作为img标记。

img {
    min-height: 100%;
    min-width: 1400px;
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

Answer 2

我认为上述（链接）网站使用 100vh 的高度而不是100％。

100vh将占用窗口的整个高度而不拉伸图像。如果添加（例如50vh），图像将占用窗口的一半。这有点像使用百分比，但我认为，使用vh是正确的方法。

如果你想让你的标题像这样，试试这个，

header {
   background-image: (image.jpg); 
   height: 100vh; 
   background-size: cover;
}

以下是如何将标题中的所有元素集中在中心（如相关链接），

header {
    background-image: (image.jpg); 
    height :100vh; 
    background-size: cover; 
    display: flex; 
    flex-direction: column; 
    justify-content: centre; 
    alighn-items: centre; 
}

Answer 3

您可以将图像包装在div中：

CSS：

<style type="text/css">
div.outer {
    width:100%;
    height:125px;
    overflow:hidden;
}
img {
    width:100%;
    height:auto;
}
</style>

HTML：

<div class="outer">
    <img src="inner.jpg">
</div>

全宽固定高度图像

3 个答案: