div内の画像のサイズが画面のサイズが変更されたときに同じにならない

Question

問題を説明してみましょう。 私は3つのdivを持っていて、それぞれ同じ幅と同じ最大高さを持っています。 画面のサイズを変更すると、それらのdiv内の画像は同じサイズになります（寸法比は同じです）。 問題はすべての画像が同じサイズであるわけではなく、すべてのdivのサイズが正しく設定されているわけではありません。彼らは画像から高さを得る傾向があり、画像の高さはすべて同じではなく、幅も同じです。

This is how the issue looks like.

It should be like this

、これは理にかなって願っています。

乾杯、

Answer 1

あなたはそれぞれのdivが定義された高さを持っていることを言っているので、あなたはまた、彼らに
"object-fit:cover"を与えることができますストレッチからイメージを防ぐために、すべての画像
height: 100%;を与えることができます。 object-fitはIEでのサポートが貧弱であることに注意してください。 そのようにして、すべての画像が比率を傷つけることなく部門全体を満たすことになります。

インターネットエクスプローラをサポートする必要がある場合は、バックグラウンドイメージ、backgorund-size：このケースのカバー、

Answer 2

この

<div class="container"> 
    <div class="images"> 
     <img src="http://placehold.it/350x150"> 
    </div> 
    <div class="images"> 
     <img src="http://placehold.it/350x350"> 
    </div> 
    <div class="images"> 
     <img src="http://placehold.it/350x250"> 
    </div> 
</div> 

.container { 
    display: flex; 
} 

.images img { 
    min-height: 200px; 
    max-width: 200px; 
    min-width: 100%; 
} 

ライブデモ試してみてください - https://jsfiddle.net/grinmax_/h02a31df/