全宽固定高度图像

如何确保图像全屏显示（或水平覆盖屏幕），而不管屏幕的宽度如何。如果我设置width: 100%;和height: auto;，显然高度会随着屏幕宽度而波动。如果图像只在屏幕较窄时才显示，则无关紧要。有任何想法吗？全宽固定高度图像

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

尝试重新调整您的浏览器窗口，明白我的意思。

来源

2013-01-15 charlenemasters

如果高度是固定的，你为什么要做'height：auto;'？ – hjpotter92

就是这样：我不会。也许我说我的问题的方式有点令人困惑。通常可以将高度设置为全宽自动。但那是我不想要的。啊，我希望这是有道理的。 – charlenemasters

您的意思是这个图像：http://www.teamnine.ch/img/bg/bg_start.jpg – hjpotter92

你可以在一个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-15 21:42:50

不幸的是，这是行不通的。只要图像宽度设置为自动，它将根据重新调整大小进行调整。 – charlenemasters

但容器div应该裁剪高于125px的东西。这不是你想要的吗？ –

从源网站，很明显，他们有一个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-15 22:30:24 hjpotter92

我觉得上面（链接）的网站使用的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-02 18:47:03

全宽固定高度图像

回答

相关问题