【レスポンシブ】画像のアスペクト比（縦横比）を保ったままリサイズ

今回は縦長の画像、横長の画像、小さい画像、大きい画像などバラバラでデバイスの幅が変わってもアスペクト比（縦横比）を保ったままリサイズする方法を紹介します。

この方法であれば画像がはみ出たりせず要素のに対して縦横比を維持したまま表示することができます。

アスペクト比（縦横比）

html

まず確認のために縦長の画像、横長の画像、小さい画像、大きい画像を用意します。

<ul>
        <li>
                <figure>
                        <img src="https://placehold.jp/500x150.png">
                </figure>
        </li>
        <li>
                <figure>
                        <img src="https://placehold.jp/100x500.png">
                </figure>
        </li>
        <li>
                <figure>
                        <img src="https://placehold.jp/1000x1000.png">
                </figure>
        </li>
        <li>
                <figure>
                        <img src="https://placehold.jp/50x50.png">
                </figure>
        </li>   
</ul>

css

ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 10px 15px 10px 0;
}       
        
li {
	width: calc((100%) / 2);
	padding-left: 15px;
	margin-bottom: 20px;
	vertical-align: top;
	box-sizing: border-box;
}       

figure {
	background: #fff;
	min-width: auto;
	min-height: auto;
	position: relative;
	width: 100%;
	padding-bottom: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	border: solid 1px #eee;
}
        
figure img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	object-fit: contain;
}

サンプル