如何將任何尺寸的圖像伸展/縮小到最適合一個正方形，只有CSS/HTML？

我有一個完美的正方形DIV - 500 x 500px。如何將任何尺寸的圖像伸展/縮小到最適合一個正方形，只有CSS/HTML？

我將在該DIV中顯示未知尺寸的圖像......某些圖像是水平的而有些是垂直的;有些大於500px高或寬，有些小於500px高或寬。我不控制圖像大小。

我怎麼能有任何圖像我放在DIV被擴大或縮小到最好的填充框？我的目標是圖像的一個軸總是500px，另一個軸被調整大小以適合。（這意味着，如果圖像不是完全正方形，圖像任一側對於垂直圖像總是會有空白區域，或者對於水平圖像在圖像的上下都會有空白區域）。使用JS或其他服務器端來對圖像大小進行一些數學計算，並以這種方式計算新的維度，但我正在尋求一種純CSS解決方案。 Flexboxes可以完成這項工作嗎？

來源

2016-04-23 Eric

如果設置大小，你不能做任何事情（寬度，高度，最大寬度，最大高度）你的圖像將會擴大。不好看。如果您的用戶上傳圖片，您可以讓他們裁剪圖片。（設置裁剪尺寸爲500 * 500px）。所以他們可以處理它，並使其正確。 – aghilpro

可能的重複：http://stackoverflow.com/q/34301340/3597276 –

檢查舊的答案，並找到了這一個。我請你接受/讚揚最有用的答案。 – LGSon

的結果，因爲在CSS object-fit屬性仍然注意廣泛的支持，和你有一個固定的容器，爲什麼不使用background-image:.../background-size:contain

.image { 
 
    height: 500px; 
 
    width: 500px; 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    border: 1px solid red;     /* to mark each box in this sample */ 
 
} 
 

 
.nr1 { 
 
    background-image: url(http://lorempixel.com/400/600/animals/1); 
 
} 
 
.nr2 { 
 
    background-image: url(http://lorempixel.com/600/400/animals/3); 
 
}

<div class="image nr1"> 
 
</div> 
 

 
<div class="image nr2"> 
 
</div>

來源

2016-04-23 05:10:15 LGSon

這裏是解決方案：請參閱http://codepen.io/anon/pen/MyBXKZ

HTML

<div class="image-wrapper"> 
<div class="image-container"> 
    <img src="http//images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="Sample image"> 
</div>

CSS

.image-wrapper { 
    background-color: #fff; 
    -webkit-box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.33); 
    -moz-box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.33); 
    box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.33); 
    height: 500px; 
    width: 500px; 
} 

.image-container { 
    text-align: center; 
    line-height: 500px; 
    height: 100%; 
} 

.image-container img { 
    max-width: 100%; 
    max-height: 100%; 
    width: auto; 
    height: auto; 
    vertical-align: middle; 
}

來源

2016-04-23 03:48:07

如何將任何尺寸的圖像伸展/縮小到最適合一個正方形，只有CSS/HTML？

回答

相關問題