如何保持图像的原始比例在方格内

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等。