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で画像を中央寄せできないを一瞬で解決する方法「コピペOK」

どうもチャーさん(@chaa___san)です。   あなたはcssで画像の中央寄せができないと、 悩んでいませんか?   この記事ではそんな悩みを解決し、 一発で画像を中央寄せで …

no image

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

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

no image

cssでボタンにhoverした時に色を変える方法

どうもチャーさんです。   あなたは、cssでボタンにhoverして、 色を変える方法を探していますか?   この記事では、ボタンホバーで、 ボタンの色を変える方法について、 お話 …

no image

cssで背景画像を回転させる方法。1行書けばok

どうも、チャーさんです。   あなたはcssで背景画像を回転させたい。 そう思っていませんか?   この記事ではcssを使って、 背景画像を回転させる方法を書いています。 &nbs …

no image

cssの書き方コメントが知りたいならこの記事をどうぞ。

どうも、チャーさんです。   この記事ではcssの書き方の1つ、 コメントについて書いてます。   具体的には、 ・そもそもコメントとは? ・コメントを書く方法 ・実用的なコメント …

no image

プログラミングのdivをわかりやすく説明します。divにcssを適用する方法も

  どうも、チャーさん(@chaa___san) です。   あなたはdivとはなんだ? と思っていませんか。   この記事ではdivとは何か、 そしてどういう風に使えば …

no image

cssで背景画像を表示するコードと方法「コピペOK」

どうもチャーさん(@chaa___san)です。     あなたはcssで背景画像を表示したいですか?   この記事ではcssで背景画像を表示する方法、 コード、あなた自 …

no image

liタグを横並びにする方法。この方法なら15秒でできますよ。

どうも、チャーさんです。   あなたがliタグを横並びにしたい、 そう思っていませんか?     この記事では、liタグを横並びにする方法を、 書いています。 &nbsp …

no image

cssで画像を丸くする方法「15秒以内にできます」

どうも、チャーさんです。   あなたはcssで画像を丸くしたい、 そう思っていませんか?   この記事では、cssで画像を丸くする方法を、 書いています。   &nbsp …

no image

webページのコーディングを効率化し3分の1の時間で制作する方法

どうも、チャーさんです。   あなたはwebページのコーディングを、 効率的にしたいと思っていませんか?   1ページ作るのに10時間とかかかって、 困ってる、という状態ではありま …

no image

cssで文字色をつける方法とコードを紹介

どうも、チャーさん(@chaa___san)です。   あなたはcssで文字色を変えたい。 そう思っていませんか?   この記事では、cssで文字色をつける方法を、 まとめましたの …

no image

cssで背景色を背景画像の上に重ねる方法「コードつき」

どうも、チャーさんです。   cssで背景色を背景画像に重ねる方法が、 知りたい。そう思っていませんか?   この記事では、cssで背景色を 背景画像の上に重ねる方法を書いています …

no image

cssを動画で学習したいならこの記事をどうぞ

どうも、チャーさんです。 あなたは、cssを始めたい、 で、わかりやすく動画で学習したい、   そう思っていませんか?   この記事では、cssを動画で学習できるよう、 僕がとった …

no image

cssの書き方でフォントサイズについて知りたいならこの記事

どうも、チャーさんです。   この記事では、cssでフォントサイズ (文字の大きさ)を変える方法を書いてます。     なので、この記事を読めば、 あなたはフォントサイズ …

no image

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

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

最新記事

チャーさん

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

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

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