css 画像

画像の高さを揃える方法「簡単にできる方法です」

投稿日:

Pocket

 

うも、チャーさんです。

 

あなたはサイズの違う画像の高さを、

揃える方法を探していますか?

 

この記事では、webページ制作で直面する、

画像の高さを揃える方法について、

お話しています。

 

 

なので、あなたがこの記事を読めば、

画像の高さを揃えることができるようになります。

 

ということで、画像の高さを揃える方法を、

探しているならこのまま下にスクロールして、

読んでみてください。

 

スポンサードサーチ

画像の高さを揃える方法

 

では、早速本題に入ります。

 

webページ制作をしていると、

画像のサイズが違っていて以下の画像のように、

高さがずれることよくありますよね。

 

高さの違う2つの画像

 

高さを揃えたいですよね。

 

で、サイズの違う画像の高さを揃えるその方法ですが、

以下です。

 

・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%を指定する。

 

 

これらをすることで、

サイズの違う画像の高さを揃えることができます。

 

画像の高さを揃える別の方法

 

ちなみに余談ですが、画像1つ1つにheightを指定しても、

別に高さは揃えれるので、手間でなければ、

そちらも手段の1つです。

 

スポンサードサーチ

まとめ

 

というわけで、まとめに入ります。

 

 

サイズの違う画像の高さを、

揃える方法ですが、

 

・imgタグをdivタグで囲う。

・divタグにdisplay:inline-blockとheight:pxを指定する。

・imgタグにheight:100%を指定する。

 

をやればokです。

 

 

はい、というわけで、

あなたの方でも早速やってみましょう。

 

すると、あなたのwebページ制作のスキルがアップし、

あなたの好きなようにページを作れたり、

あなたが好きにテンプレートをいじったりできるようになるので。

 

それでは、是非ともやってみてください。

 

 

では、読んでいただいてありがとうございました。

 

チャーさん

 

 

-css, 画像


スポンサードサーチ

関連記事

no image

cssの書き方で大なりと書くとどうなるか知りたいならこの記事。

どうも、チャーさんです。   あなたはcssの書き方で大なり (例 .class > p )のように書くと、 どう動くのか疑問に思ってませんか?   この記事では、大なりで書 …

no image

cssで追随させる方法、スクロールしてもついてくるよ

  どうも、チャーさんです。   あなたは、cssでサイドバーなどを、 追随させる方法を知りたいと思っていませんか?     この記事では、スクロールしても、 …

no image

z-indexが効かない場合の解決法(relativeつけたのに効かない場合)

   どうもチャーさんです。   あなたはz-indexが効かないと困っていませんか? ちゃんとrelativeもつけてるのに、 なぜ効かないんだと悩んでいませんか?   この記事 …

no image

メニューに下線をだすcss(マウスでホバーした時に)

どうもチャーさんです。 あなたはメニューに下線をだすcssを 探していますか?   この記事では、メニューの上に マウスを持っていくと、メニューに下線が 表示される方法を書いています。 &n …

no image

ブートストラップの使い方を初心者向けに紹介

どうも、チャーさんです。   あなたはブートストラップを使ってみたい、 または使わないといけないけど、 使い方がわからない。   導入の仕方も、何したらいいかもわからない。 そんな …

no image

レスポンシブデザインを3秒で確認できる方法「各サイズ」

どうも、チャーさんです。   あなたは、レスポンシブデザインの確認方法を、 探していませんか?   この記事では、レスポンシブデザインを、 スマホサイズ、タブレットサイズ、pcサイ …

no image

cssで平行四辺形を作る方法「1行足せばできますよ」

どうも、チャーさんです。   あなたは、cssで平行四辺形に できないものかと思っていませんか?   この記事では、要素をcssで平行四辺形に する方法を書いています。 &nbsp …

ワードプレスで文字の周りを線で囲う方法(コピペで一発でできます)

  どうもchamです。   あなたはワードプレスで記事を書いていて 囲いをつけたいと思ったことはありませんか?   ここに文字を入れる   こんな風に囲いをつ …

no image

wordpressで条件分岐でcss(デザイン)を切り替える方法

どうもチャーさんです。 あなたはwordpresで、条件分岐させて、 css(デザイン)を切り替えたいと思っていませんか?   ページごとに違うデザインを施せるように したい、そう思っていま …

ワードプレスでCSSを使い丸を表示する方法

どうもチャーさんです。 あなたはワードプレスで丸を表示したいと 思ったことはありませんか。   この記事では丸の作りかたを解説してるので ワードプレスなどで丸を表示したい人はどうぞ。 &nb …

no image

字下げをcssでやる方法。1行だけ、複数行の字下げも対応

どうもチャーさんです。   あなたは字下げをcssでどうやればいいのか? と疑問に思ってませんか?   この記事では、cssを使い、 1行だけ字下げ、複数行を字下げする方法を、 書 …

no image

positionで縦に中央寄せする方法はこちらです。

どうも、チャーさんです。   あなたはpositionで縦に中央寄せをしたいのに、 できずに困っていませんか?     この記事ではpositionで要素を縦に、 中央寄 …

no image

cssの書き方class編(初学者向け)

どうも、チャーさんです。 この記事では、cssの書き方を書いています。   具体的にはclass、classを複数使う方法、 idについてとcss書き方についての内容なので、 この記事を読め …

cssで上下左右に中央寄せする簡単で便利な方法

どうも、チャーさんです。   あなたはcssで上下左右、両方とも 中央寄せしたいと思っていませんか?   左右ならtext-alignやmargin:autoで できるけど上下って …

no image

ブートストラップを使う利点をわかりやすく説明します。習得方法も紹介。

  どうもチャーさんです。   あなたはブートストラップを使う利点は、 何だろうと思っていませんか?   css使えばデザインなんてできる、 何でわざわざブートストラップ …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。