如何保持圖像的原始比例在方格內

Question

我已經看到很多有關這方面的解決方案。解決方案是爲更廣泛或更高的圖像。但我的問題是需要保持比例的形象，我不知道它可能會更高或更寬。

Answer 1

你可以這樣說：

* {margin:0;padding:0;box-sizing:border-box} 
 
.square { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: Teal; 
 
} 
 
.square > img { 
 
    display: block; 
 
    width: auto; 
 
    height: auto; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
}

<div class="square"> 
 
    <img src="http://boldercreative.co.uk/wp-content/uploads/2016/09/boldercreative_hmv_vinyl_engineering2-1250x700.jpg" alt="img"> 
 
</div>

我所用的原始影像尺寸爲1250x700，這個解決方案保持精確的比例，但你可以看到它不伸展或填滿廣場的高度，因爲它保留了確切的比例。如果您想填滿整個廣場，則需要使用高度相同的圖像，例如高度爲&的圖像。 1250x1250或700x700等。