どうも、チャーさんです。
あなたはサイズの違う画像の高さを、
揃える方法を探していますか？
この記事では、webページ制作で直面する、
画像の高さを揃える方法について、
お話しています。
なので、あなたがこの記事を読めば、
画像の高さを揃えることができるようになります。
ということで、画像の高さを揃える方法を、
探しているならこのまま下にスクロールして、
読んでみてください。
スポンサードサーチ
画像の高さを揃える方法
では、早速本題に入ります。
webページ制作をしていると、
画像のサイズが違っていて以下の画像のように、
高さがずれることよくありますよね。
高さを揃えたいですよね。
で、サイズの違う画像の高さを揃えるその方法ですが、
以下です。
・imgタグをdivタグで囲う。
・divタグにdisplay:inline-blockとheight:pxを指定する。
・imgタグにheight:100%を指定する。
です。
コードの例としては以下です。
例
HTML
<body>
<div class=”outer”>
<img src=”p1.png”>
<img src=”p2.png”>
</div>
</body>
CSS
.outer {
display:inline-block;
height:200px;
}
img {
height:100%;
}
で以上を記述すると、
はい、この通り画像の高さが揃いました。
やはり揃った方が見た目が綺麗ですね。
画像の高さが揃う仕組み
で、これの原理を説明すると、
imgタグにつけたheight:100%で、
親要素になってるdivの高さいっぱいまで縦に広がる。
そして、親要素のdivに高さを指定してるので、
そこでheight:100%のimgタグの高さが、
止まり、揃うというわけですね。
というわけで、
・imgタグをdivタグで囲う。
・divタグにdisplay:inline-blockとheight:pxを指定する。
・imgタグにheight:100%を指定する。
これらをすることで、
サイズの違う画像の高さを揃えることができます。
画像の高さを揃える別の方法
ちなみに余談ですが、画像１つ１つにheightを指定しても、
別に高さは揃えれるので、手間でなければ、
そちらも手段の１つです。
スポンサードサーチ
まとめ
というわけで、まとめに入ります。
サイズの違う画像の高さを、
揃える方法ですが、
・imgタグをdivタグで囲う。
・divタグにdisplay:inline-blockとheight:pxを指定する。
・imgタグにheight:100%を指定する。
をやればokです。
はい、というわけで、
あなたの方でも早速やってみましょう。
すると、あなたのwebページ制作のスキルがアップし、
あなたの好きなようにページを作れたり、
あなたが好きにテンプレートをいじったりできるようになるので。
それでは、是非ともやってみてください。
では、読んでいただいてありがとうございました。
チャーさん
