Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

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でやる方法。1行だけ、複数行の字下げも対応

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

no image

cssの効率的な学習方法を知りたいなら読んでください。

  どうも、チャーさんです。   あなたはcssの学習方法を模索していますか? どうしたらもっと効率よく早く学習し上達できるのか、 その方法を探していますか?   この記 …

no image

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

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

no image

レスポンシブでフォントサイズを可変にする方法「手間いらず」

どうもチャーさんです。   あなたはレスポンシブで、 フォントサイズを可変にする方法を 探していますか?   この記事では、フォントサイズをレスポンシブで 自動調整できる方法を書い …

no image

cssスマホ時のフォントサイズはこのサイズが良さげ

  どうも、チャーさんです。   あなたはcssのスマホのフォントサイズを、 どれぐらいにすればいいか、 と疑問に思っていませんか?     この記事では、迷っ …

no image

cssでテーブルの行間を広げる方法

どうも、チャーさんです。 あなたはcssでテーブルに行間をとりたい、 (セルとセルの間のスペースを広げたい)と思ってませんか?   この記事では、cssでテーブルの行間を 広げる方法を書いて …

no image

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

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

no image

htmlのリンクの下線を消す方法「1行書けば消せますよ」

どうも、チャーさんです。   あなたはhtmlのリンクの下線を消す方法を、 探していませんか?   この記事では、リンクの下線を消す方法を 書いています。   &nbsp …

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

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

no image

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

no image

cssで画像を中央寄せできないを一瞬で解決する方法「コピペOK」

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

no image

z-indexが効かない時の簡単な解決策。1行あれを足せば解決ですよ

z index 効かない   どうも、チャーさんです。   あなたはz-indexが効かないと、 困っていませんか?   ページ制作をしてて、 z-indexを書いたのに …

no image

cssでボタンをレスポンシブ対応にする方法(微調整必要なしで楽ですよ)

どうも、チャーさんです。   あなたはcssでボタンをレスポンシブにしたい、 かつブレークポイントごとに微調整する手間ひまの、 必要のないボタンを作る方法はないかと思ってませんか? &nbs …

no image

レスポンシブ対応の画像にする方法。1行コードを書くだけでOK

  どうも、チャーさんです。   あなたは画像をレスポンシブ対応にしたい、 そう思っていませんか?   ブレイクポイント毎に、画像の幅を指定するのは、 もう疲れた、何か一 …

no image

position:absoluteがレスポンシブでずれるのを解決する簡単な方法

どうも、チャーさんです。   あなたはposition:absoluteが、 レスポンシブにすると、ずれるということで、 困っていませんか?   画面サイズを変えるだけで、 位置が …

最新記事

チャーさん

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

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

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