全寬固定高度圖像

如何確保圖像全屏顯示（或水平覆蓋屏幕），而不管屏幕的寬度如何。如果我設置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

全寬固定高度圖像

回答

相關問題