正方形のdiv内の画像の元の比率を維持する方法

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など