中心和縮放任意圖像以填充div

Question

我有一個未知大小*的容器div。我想填充一個未知大小的圖像，以便圖像完全填滿div，保持縱橫比。

然後，我想中心的圖像，以便裁剪的部分在邊緣。

我還需要一種方法來確保容器的填充不顯示任何圖像。

*如果有幫助，容器的大小不是真的不知道。這是一個Bootstrap列，所以我可以根據需要計算寬度。

解決方案

這些樣式的伎倆：

background: url(...) no-repeat; 
background-size: cover; 
background-position: center center; 
width: 100%; 
height: 100%; 

Answer 1

這可以使用背景圖片可以輕鬆實現。您指定它爲你想後，只需添加以下CSS到你的容器，使背景肯定蓋它的容器，同時保持寬高比：

CSS代碼

.container { 
    background-size: cover; 
} 

這將不是考慮到最大尺寸，並將圖像拉伸超過其原始分辨率，導致潛在的模糊。