画像サイズと位置調整

前にも画像サイズの指定についてはまとめたことがありますが、位置調整も合わせて整理しておきます（結局、毎回調べてるような気もしたんで・・・）

CSSによるサイズ指定（img）と使い分け

「object-fit」プロパティを利用する。

思った通りに要素に画像を表示させる方法としては、「object-fit」プロパティがあります。縦と横のサイズによってははみ出たり空白ができたり・・・なのでちょっとおさらいします。

表示されるサイズ

指定する値	内容
cover	縦横比は維持したまま、隙間なく画像が表示されます。 この場合、「画像の一部が表示されない＝見切れる」ことになります。
contain	縦横比は維持したまま、画像全体が表示されます。 この場合、「画像が表示されない余白」ができることになります。
fill（初期値）	指定された要素サイズ一杯になるように表示されます＝変形します
none	そのままのサイズで表示されます。そのため、画像サイズと表示サイズによっては 余白ができたり、見切れたりします。
scale-down	そのままのサイズで表示されますが、はみ出す場合だけ「contain」と同じく画像全体が表示されるように縮小されます。

「object-position」プロパティを利用する。

画像の位置を調整するには、「object-position」プロパティを利用します。
　object-position: <水平方向の位置> <垂直方向の> ;
1つまたは2つの値で指定します。1つ目は水平方向、2つ目は垂直方向の指定となりますが、1つの値だけを指定した場合は、水平・垂直方向とも同じ値になります。
　（例）　object~position: 50％ 50％ ;

方向	指定する値	内容	数値で指定する場合	備考
水平方向	center	中央に表示	50％	初期値
	left	左寄せで表示	0%、0px
	right	右寄せで表示	100%
	数値	左端からの表示位置
垂直方向	center	中央に表示	50%	初期値
	top	上寄せで表示	0%、0px
	bottom	下寄せで表示	100%
	数値	上端からの表示位置

ちなみにキーワードと数値を指定すると、オフセットの指定となります。
　（例）　object-position: left 10px top 100px ;
この場合は、「左端を10px、上端を100px空ける」となります。

まとめ

毎回、調べてるので今回まとめてみましたが、やっぱり実際にコードを書いてみて表示してみることが大切ですね。こらからも頑張っていきたいと思います。