ECサイトなんかだと、よくあるパターンなんですが、商品画像のトリミングが縦長だったり、横長だったりして、余白が気になるってお客さんに言われます。
トリミングが正方形だったらなんの問題もないんですが、ウェブに関わる全ての人が画像を正方形にトリミングできるはずもないので、それがどんなトリミングであっても美しく表示させるのがウェブデザイナーの仕事だと思います。
左右のセンタリングは簡単
text-align: centerを使って、左右中央は簡単にできます
[html]
<style>
div.LRbox {
text-align: center;
border: 1px solid #cacaca;
width: 200px;
height: 200px;
}
</style>
<div class="LRbox">
<img src="https://wordpress.go-designing.com/wp-content/uploads/2015/02/LR1.gif" alt="縦長の画像" width="150" height="200" />
</div>
[/html]
上下のセンタリングがめんどい
ダメな例
[html]
<style>
div.TBbox {
vertical-align: middle;
border: 1px solid #cacaca;
width: 200px;
height: 200px;
}
</style>
<div class="TBbox">
<img src="https://wordpress.go-designing.com/wp-content/uploads/2015/02/TB.gif" alt="横長の画像" width="200" height="150" />
</div>
[/html]
上下の場合、vertical-align:middleを使っても中央によってはくれませんね。
要素名のせいで勘違いしやすいのですがvertical-alignは、ボックス内のインライン要素の高さ位置を揃えるのであって、ボックスの内部の位置を中央にするわけではないのです。
解決策
[html]
<style>
div.TBboxTrue {
border: 1px solid #cacaca;
width: 200px;
height: 200px;
position: relative; /* 親のボックスのpositionをrelativeに */
}
div.TBboxTrue img {
position: absolute; /* 上下中央にしたい要素のpositionをabsoluteに */
top: 0; /* top位置を0 */
bottom: 0; /* bottom位置も0 */
margin: auto; /* marginをautoに */
}
</style>
<div class="TBboxTrue">
<img src="https://wordpress.go-designing.com/wp-content/uploads/2015/02/TB.gif" alt="横長の画像" width="200" height="150" />
</div>
[/html]
応用
これを応用して、上下左右中央に指定しておくことができます。
たとえば、ボックスより大きい画像の場合は、max-widthやmax-heightを100%にしておくことで、ボックスから画像がはみ出てしまうことを回避できますが、そもそもボックスより画像が小さい場合は、上下左右中央に寄せることで対応するといいでしょう。
[html]
<style>
div.TBLRbox {
border: 1px solid #cacaca;
width: 200px;
height: 200px;
position: relative;
margin-bottom: 20px;
}
div.TBLRbox img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>
<div class="TBLRbox">
<img src="https://wordpress.go-designing.com/wp-content/uploads/2015/02/TBLR.gif" alt="ボックスより小さい画像" width="150" height="150" />
</div>
[/html]
