使用瀏覽器寬度自動調整圖像大小，但在div內保持相同的高度？

Question

我想弄清楚是否有一個CSS的方式來獲得boilerroom.tv頭上的效果。一個非常類似的問題：How to resize image automatically on browser width resize but keep same height?但沒有填滿整個頁面，只在一個div內。基本上寬度與瀏覽器保持一致，高度保持不變（例如...... 300px），因此圖像變得越來越小，但隱藏了div的溢出。謝謝！

Answer 1

您應該發佈代碼，以便我們可以更好地瞭解您嘗試完成的內容以及您嘗試的內容。然而，這聽起來像你正在尋找背景封面。在您的CSS中：

.element{ 
    background: url(path/to/image) 
    background-size: cover; 
    height: 300px; 
    width: 100%; 
} 

請務必在背景大小中包含正確的供應商前綴以實現跨瀏覽器兼容性。

Answer 2

請試試這個。 div background：url（imagepath） background-size：cover; 身高：100％; 寬度：100％; }