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

f:id:art2nd:20170315085112j:plain

<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>

2017-03-13

写真/画像をサムネイル一覧するHTMLサンプル（ブロック全体は中央揃え（センタリング）＋中の複数画像は左寄せ）

ホームページ、Web作成

写真/画像をサムネイル一覧するHTMLサンプルを作成。

f:id:art2nd:20170313140402j:plain

「サムネイル一覧のブロック全体はページ内で左右中央揃えし、ブロック内の複数画像は左寄せする。」というのをCSSだけで実現したかったが、ブロック内の右側に余分な余白が付いてしまうのを解除する方法が見つからず。

（【2017/4/11追記】CSSのみで実現する方法が分かった。詳細は以下。

　　http://2ndart.hatenablog.com/entry/2017/04/11/193206

）

Yahoo!知恵袋で質問して、oishii_mahouさんからJavaScriptで実現する方法を教えてもらって解決。方法としては、ブロック内の横一列に並ぶ画像の数に合わせてブロックの横幅を調整し、余分の余白が出来ないようにする。

画像サムネイル一覧のブロック全体をページ内で左右中央揃えしたい。... - Yahoo!知恵袋

画像サムネイルHTMLサンプルページは以下。なお、ブロック内の各画像はそれぞれ正方形ボックス内で上下左右中央揃えしている。

≪画像サムネイル・サンプル≫

https://ok2nd.github.io/tool/html/thumbnail-sample.html

≪8cm×12cmの小さなアート≫にも適用。（2017/4/13：Media Queriesを使う方法に変更。）

https://ok2nd.sakura.ne.jp/art/

以下関係部分のHTML+CSS+JavaScript。

<div id="contents">
	<div id="gallery">
		<span style="background-image: url('thumbs/001.jpg')"></span>
		<span style="background-image: url('thumbs/002.jpg')"></span>
		...
	</div>
</div>
<style>
#contents {
	margin: 0 auto;
}
#gallery {
	margin: 0 auto;
	padding: 0;
	text-align: left;
}
</style>
<script>
function initGallery() {
	gallery = document.getElementById("gallery");
	imgItem = gallery.getElementsByTagName("span");
	gallery.innerHTML = gallery.innerHTML.replace( /\r?\n|\r/g, "" );	// 改行コードを除去
	adjustGallery();
}
function adjustGallery() {
	var imgStyle = imgItem[0].currentStyle || document.defaultView.getComputedStyle(imgItem[0], "");
	var imgMargin = parseInt(imgStyle.marginLeft, 10) + parseInt(imgStyle.marginRight, 10);
	var imgWidth = imgItem[0].offsetWidth + 5;
	var winWidth = document.body.offsetWidth || document.documentElement.offsetWidth;	// ウィンドウ幅
	var imgNum = Math.min(Math.floor(winWidth/imgWidth), imgItem.length);	// 横に並んでいる画像の数
	gallery.style.width = imgNum * imgWidth + (imgNum - 1) * imgMargin + "px";
}
window.addEventListener( "load", initGallery, false );
window.addEventListener( "resize", adjustGallery, false );
</script>