どういうことがしたいの

以下のように用意した画像を、新規で画像をデプロイすることなく一部分のみ切り出したい。

以下の結果が得らえれることが期待される。

サムネイル？

単純に画像全体を小さく表示して並べたときに把握するのを簡単にするものを画像のサムネイルと呼ぶが、ここではそれではなく 画像のごく一部を切り取って表示したもの を指す。

Web 古代社会には絵を個人が公開するために便利な Twitter や Pixiv 等といったサービスはなかった。ブログなどが登場する前は個人がウェブサイトを作成し、そこで公開されていたのである。そういった場で画像の一部のみを切り出し、それをリストとして表示して「見たい絵をクリックしてね」とする公開方法が流行った。

サムネイル画像は大体が本体の画像と別に用意されていた。だが、このために画像を切り出してその画像をデプロイするのは面倒だ。

何に使うの

TRPG のセッションログを公開する際に発言者の名前欄の下にキャラクター画像の顔だけ表示したい。全身絵は提供されており、切り抜き加工については許可されている。しかし、顔画像だけ切り出すのが面倒だと思った。

やり方

以下のような HTML を用意し、画像を picture クラスを持つ要素に表示させる。そのうえで、表示範囲を pictureFrame の範囲のみに絞る。

<div class="pictureFrame">
	<div class="picture"></div>
</div>

.pictureFrame {
	/* overflow: hidden にすることで画像のうち
	   この範囲をはみ出している部分は非表示とする */
	overflow: hidden;

	/* .picture クラスの表示位置の機転を .picutureFrame とすることで
	   位置操作を容易にする */
	position: relative;

	/* お好みで。画像を表示する範囲。
	   この場合は 30px × 30px の正方形となる。
	   ボーダーはいらなければ設定しなくてよい */
	height: 30px;
	width: 30px;
	border: 3px double black;
}

.picture {
	/* picture の表示位置の基準点を .pictureFrame の左上とする */
	position: absolute;

	/* 画像の表示を .picture に収まる最大サイズかつ縦横比を維持した状態とする */
	background-size: contain;"

	/* ！！！ 画像ごとに指定が必要 ！！！
	   画像を上に 55px 左に 85px ズラし、
	   画像の顔部分が表示されるように調整した */
	top: -55px;
	left: -85px;

	/* ！！！ 画像ごとに指定が必要 ！！！
	   画像の縮尺を本来の 720 × 1280 から以下のサイズに縮尺する */
	width: 180px;
	height: 320px;

	/* ！！！ 画像ごとに指定が必要 ！！！
	   画像の URL */
	background-image: url('http://shunshun94.web.fc2.com/replies/pics/enjoySw2_majin-adely_1.png');
}

別に画像は div を使わなくても img 要素でもよい気がする。ただ、用途が TRPG のログのためだった。なので

• 要編集箇所が多く、発言者ごとに img の src 属性を編集するのが面倒だった
• 画像を差し込む部分の親要素が発言者ごとに異なる class が割り当てられたいた

以上の関係でこっちの方が容易だった。

また、pictureFrame クラスに border-radius を設定したりすれば丸く切り取れたりする。