縦横の比率を保ち画像配置をするCSSのコードです。
ブログ等の画像の高さが違う画像が入る可能性のある箇所に追記する。
画像タグを囲うタグのaspect-ratioで縦横の比率を変更する。
<figure><img src="img/hogehoge.jpg" alt="画像" /></figure>figure{
overflow:hidden;
aspect-ratio: 5 / 3; //画像の比率はここで修正する
width:100%;
display:flex;
align-content:center;
justify-conent:center;
}
figure img{
width:100%;
object-fit: cover;
}画像の縦のみを合わせたい場合はobject-fitを「contain」に変更する。

