全宽固定高度图片答案

【问题标题】：Full width fixed height Image全宽固定高度图片
【发布时间】：2012-12-30 02:49:00
【问题描述】：

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

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

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

【问题讨论】：

如果高度是固定的，你为什么要做height: auto;？
就是这样：我不会。也许我表达我的问题的方式有点令人困惑。通常人们会将高度设置为全宽自动。但那是我不想要的。啊，我希望这是有道理的。
你的意思是这张图片：teamnine.ch/img/bg/bg_start.jpg
是的。它显示为图像而不是背景。

标签： jquery css image responsive-design

【解决方案1】：

我认为上述（链接）网站使用 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; 
}

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案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>

【讨论】：

不幸的是，这不起作用。只要图像宽度设置为自动，它就会通过重新调整大小进行调整。
但是容器 div 应该裁剪任何高于 125px 的内容。这不是你想要的吗？