【CSS】横並びの文字と画像の高さを揃える方法

文字と画像が横並びになっているデザインをコーディングしたことはありますか？

コーディングした時、文字と画像の高さがどうしても合わない！

ディレクター・デザイナーに高さが合ってないことを指摘しまった！

という経験が少なからず有ります。

合わない原因は何なのか、合わせるためにどうしたらいいのかを説明します。

なぜ横並びの文字と画像の高さを揃えにくいの？原因は？

1.コンテンツ幅による改行

ひとつめの原因は、コンテンツ幅による改行です。

画面サイズが変わり、コンテンツ幅が変化することによって改行のタイミングが変わってきます。

そのため2行だったり、3行になったりと高さが変わるが、画像の高さは柔軟に変わらないです。

文字の高さが変わる度に、画像の高さも変更しないといけないです。

または改行させないために文字サイズを変更する必要があります。

2.デザインとの文字サイズと行間の違い

文字サイズや文字幅、文字間、行間などが微調整されたデザインをいただくことがあります。

デザインを作ったソフトではその微調整が容易にできたとしても、CSSでは手がかかることがあります。

また、その調整の数字が同じでも、表現のされ方が異なる場合があります。

そのため、もらった画像ファイルでは形が合わないことが出てきてしまいます。

デザイナーの熱意は伝わるのですが、、、というところです。

CSSで文字と画像の高さを揃える方法

それでは、文字と画像の高さを揃える方法を3つ紹介いたします。

display:flexとobjekt-fit:coverを使う方法が一番おすすめです。

1.display:flexとobject-fit:coverを使う

僕はこれが一番やりやすかったです！

なぜかと言うと、あとの2つは改行を気にしないといけないのでとても面倒でした。

やり方は、非常にシンプルです。

<div class="main-content">
  <div class="left-content">
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </div>
  <div class="right-content">
    <img src="/img/top/example.jpg">
  </div>
</div>

.main-content{
  display:flex;
  justify-content: space-between;
}
.left-content{
  width: 60%;
}
.right-content{
  width: 38%;
}
.right-content img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

親の要素に「display:flex」を適用することによって、横並びにでき尚且つ、高さも揃います。

次に表示させる画像に「object-fit:cover」をつけ、widthとheightを100%にすることによって、表示させたいコンテンツサイズ＝.right-contentのサイズに切り取ってくれます。

たったこの2ステップだけで文字と画像の高さが揃います。

ただ注意点は、コンテンツサイズに収まらなかった部分は切り取られます。

切り取られても大丈夫な方には、最善な方法です。

2.viewportで画像サイズを変更する

画像を切り取られるのが嫌な方はこちらがおすすめです。

viewportで画面サイズごとに改行するタイミングで画像のサイズを変更します。

どの画面サイズで文字に改行が入ってしまうのかわからないです。

なので、ブラウザの検証モードを使いながら一つずつチェックをしなければなりません。

とても面倒でたまりません。

3.viewportで文字サイズを変更する

上記の方法とよく似ているのですが、こちらは画像のサイズは変更せずに、文字サイズを変更させます。

文字サイズを変更することによって改行と文字の高さをコントロールできます。

しかし、これもブラウザの検証モードで一つずつやります。

CSSで横並びの文字と画像の高さを揃える方法：まとめ

文字と画像の高さを揃える方法を3つ紹介しましたが、やはり画像の条件が許すのであれば1つめのdisplay:flexとobject-fit:coverを使う方法がおすすめです。

是非一度試してみてください！