CSS width100%の際に高さを固定する

Question

画像を立幅固定で拡大して中央に配置したいです。
下記のような形だと、トリミングされて画像の映らないエリアが出てしまいます。

こちら改善したいのですが、何か方法などないでしょうか。
基本的に画像のアスペクト比を保ったまま、全部分を表示したいです。

.post_image { width:100%; height; 300px; }
.post_image img { object-fit: cover; }

Answer 1

object-fit: contain;に変更してください。

object-fit: cover;は、「トリミングされて画像の映らないエリアが出」るような設定です。