CSSで画像を正方形枠内で上下左右中央揃え（センタリング）するシンプルな方法

前回の「写真/画像をサムネイル一覧するHTMLサンプル」で紹介したHTMLサンプルでは、画像を正方形枠内で上下左右中央揃えする方法として、<span>タグのbackground-imageとbackground-sizeを使っていたが、<img>タグのobject-fit:contain;を使う方法を試してみた。object-fit:contain;を使うと、要素枠内に合うサイズになり縦横比は維持され中央揃えされる。HTMLとCSSは非常にシンプルで美しい。だが、残念ながら、現時点ではMicrosoft EdgeやIEでは機能しない。

<span>タグのbackground-imageとbackground-sizeを使う方法

→ <span>タグ版 画像サムネイルHTMLサンプル

<div id="gallery">
	<span style="background-image: url('thumbs/001.jpg')"></span>
	<span style="background-image: url('thumbs/002.jpg')"></span>
</div>
<style>
#gallery span {
	display: inline-block;
	background-position: center center;
	background-repeat: no-repeat;
	margin: 2px;
	width: 240px;
	height: 240px;
	background-size: contain;
}
</style>

<img>タグのobject-fit:contain;を使う方法

→ <img>タグ版 画像サムネイルHTMLサンプル

<div id="gallery">
	<img src="thumbs/001.jpg">
	<img src="thumbs/002.jpg">
</div>
<style>
#gallery img {
	object-fit: contain;
	margin: 2px;
	width: 240px;
	height: 240px;
}
</style>