The current article
枠内で画像のサイズに合わせて上下左右中央揃えするCSS
縦横比を変えずに要素内に収め、余白ができれば上下左右中央揃えにしたい時に使えるCSSの記述方法です。
備忘録を兼ねてご紹介いたします。
capture
同じ比率の横画像ばっかりなんてこと少ないですよね・・・
このCSSを使うと、要素より大きい画像なら、縦、横、長いほうが要素いっぱいに収まり、比率を合わせて短い方も縮小され、余白ができれば縦横中央に整います。
要素より小さい画像は、もちろんそのまま中央に配置されます。
クライアントに画像投稿してもらう時（どデカい画像はやめて～）など重宝します。
以下、参考タグです。
HTML記述例
<div class="centered"> <div> <img class="adapt" alt="" src="image.png"> </div> </div>
3行目の「img」に「adapt」というクラスを付けるのを忘れずにー
CSS記述例
.centered {
border: 1px solid #ccc;
display: table;
height: 100px;
width: 150px;
}
.centered > div {
display: table-cell;
vertical-align: middle;
}
img.adapt {
display: block;
margin: 0 auto;
max-height: 100px;
max-width: 150px;
}
「display: table-cell;」を使った書き方で、th や td と同じ性質を持たせて「vertical-align: middle;」を効かせています。
4行目・14行目の高さと
5行目・15行目の幅は、同じ大きさにして適宜変更すると良いと思いますー
関連記事
