設置不改變寬度的固定高度

我想使圖像保持在一定的高度，但我也希望它保持在用戶屏幕的寬度。設置不改變寬度的固定高度

以下是圖像的CSS：

#cafe { 
    max-width: 100%; 
    height: 700px; 
}

下面是輸出：

這是什麼問題？ – Banzay

如果你有一個固定的高度，並且你希望圖像是瀏覽器的寬度，那麼圖像的高寬比將會偏斜，除非固定高度和瀏覽器寬度也是高寬比 - 這是不太可能的。那樣你覺得可以嗎？看起來像你想避免的事情。 –

你有兩個設置高度的選項; ** 1）**如果圖像的整個寬度必須可以查看，則允許圖像水平拉伸** 2）**如果您不希望圖像被拉伸，則允許隱藏部分圖像水平。 [一些例子]（https://jsfiddle.net/gzwoer80/）使用'background-size'。 – hungerstar

你可以試試這個

#cafe { 
    width: 100%; 
    height: 100vh; 
}

這裏的 'VH' 是指視口高度會自動將用戶的屏幕高度。

2017-01-09 19:12:10

這有效，但現在我有點想要的高度更少，當我改變vh到65像這樣的圖像看起來拉伸。 –

@JordanBaron擁有設置的高度加上可變的寬度將始終拉伸圖像。也就是說，除非您願意允許隱藏圖像的某些部分，以保持圖像的縱橫比。 – hungerstar

是的，我願意這樣做，但怎麼樣？ –

回答