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, 画像


スポンサードサーチ

関連記事

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

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

no image

cssの書き方cssはまとめて書いて楽をしましょう。

どうも、チャーさんです。   この記事ではcssの書き方の1つ まとめて書くについてお話ししてます。   なのであなたがこの記事を読めば、 今までより、「より早く、より効率的に、よ …

no image

cssで要素の位置調整をする方法を丁寧に解説コピペもok

どうも、チャーさん(@chaa___san)です。   あなたはcssで画像やdivで作った要素の位置調整を、 したいと思っていませんか?   この記事ではcssでそれらの要素の位 …

no image

cssで画像をトリミングする方法。「記述1行で完了」

どうも、チャーさんです。   あなたはcssで画像をトリミングしたい。 そう思っていませんか?   photoshopでトリミングするのめんどい、 cssでできんかな?と思ってませ …

no image

cssで背景色をつける方法とコードの書き方

  どうも、チャーさん(@chaa___san)です。   あなたはcssで背景色をつけたいんだけど、 どうすればいいかわからない。   そう思っていませんか? &nbs …

no image

cssの書き方をまとめました「よく使う内容を網羅」

どうも、チャーさんです。 あなたはcssの書き方について、 網羅的に知りたいですか?   この記事ではcssの書き方について、 よく使われるものについてまとめてみました。   なの …

no image

cssでレスポンシブ対応にするための方法、具体的な手順を解説します

どうも、チャーさんです。   あなたはcssでレスポンシブにするには、 何を書けばいいのか?と思っていませんか?   この記事では、cssでレスポンシブにするための、 方法や、記述 …

no image

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

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

max-widthとmin-widthの違いについてわかりやすく説明します

  あなたはmax-widthとmin-widthの 違いについて疑問を持ってますか?   この記事では、max-widthとmin-width の違いを説明してるので、これを読め …

no image

cssの背景画像が繰り返しになるのを解決する方法

どうも、チャーさんです。   あなたはcssで背景画像を設置すると、 繰り返しになっていて困っていませんか?   この記事では、cssで表示した背景画像が、 繰り返しにならない方法 …

no image

cssで文章を省略する方法。コピペでok

どうもチャーさんです。   あなたはcssで文章を省略したいと、 思っていませんか?   この記事では、cssを使い、 文章を省略する方法を書いています。   &nbsp …

no image

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

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

no image

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

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

no image

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

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

no image

cssで見出しに画像を表示させる方法「簡単にできる」

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

最新記事

チャーさん

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

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

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