高さを変更するのではなく、画像の中心を拡大する

Question

私は自分のウェブサイトの中心にギャラリーを持っています。動的な幅（ブートストラップカラム）と固定高さ（80vh）があります。私は、コンテナの50%幅、および350px高さを持つように内部の画像が欲しい：

<div class="row"> 
    <div class="col-md-3"></div> 
    <div class="col-md-6" style="height: 80vh;"> 
    <div style="overflow-y: auto;"> 
     <div style="width: 50%; height: 350px; float: left"> 
     <img src="..." style="min-width: 100%; height: 350px;"> 
     </div> 
     <div style="width: 50%; height: 350px; float: left"> 
     <img src="..." style="min-width: 100%; height: 350px;"> 
     </div> 
     <div style="width: 50%; height: 350px; float: left"> 
     <img src="..." style="min-width: 100%; height: 350px;"> 
     </div> 
    </div> 
    </div> 
    <div class="col-md-3"></div> 
</div> 

事は、私は、ウェブサイトのサイズを変更すると、幅を変更することで、高さは同じまま - イメージのサイズを変更します。より良い解決策はありますか？私は全体のサイズを変更するのではなく、画像を拡大することを考えていました。これは可能でしょうか？

Answer 1

各ギャラリーアイテムの高さを厳密にとし、画像のアスペクト比を維持したい場合は、background-size: coverを使用して画像のサイズを変更するのではなく、拡大してトリミングすることができます。参照：https://jsfiddle.net/nelonoel/c8zsscuL/