1

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

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

尝试重新调整浏览器窗口的大小以了解我的意思。

4

3 回答 3

2

从源网站，很明显他们有一个min-height属性集。因此，您会得到这样的结果。img在您想要的页面上，为您的标签尝试以下 CSS 。

img {
    min-height: 100%;
    min-width: 1400px;
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
于 2013-01-15T22:30:24.217 回答
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; 
}
于 2016-07-02T18:47:03.597 回答
0

您可以将图像包装在 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>
于 2013-01-15T21:42:50.750 回答