img要素に設定すべきCSSについて。
画像サイズの設定はほぼこれで対応できる？

コーディングをしていくにあたって、画像は切っても切り離せない存在です。
昔のSEOのようにテキストが大事だー！画像なんて全部テキストに変えてしまえ！なんて時代ではなくなり、画像とテキストをいかに融合させて作るか求められています。

そんな画像をコーディングしていく際、今ではレスポンシブで構築していくことが多いかと思いますが、たまに画像がなんかうまく表示されない…というケースに出くわす事があります。

縦横比がおかしくなってしまって…、なんかはみ出してしまって…、変な余白が…、ということはたまに起きるのですが、これほとんどがimg要素に設定すべきcssをこうしておけばほとんど起こらず解決できたりします。

今回はそんなimgに設定すべきcssというかルール的なことをまとめてみたいと思います。

img要素のデフォルト仕様にしておくべき設定

コーディングしていくにあたり、デフォルト設定的なcssを用いてコーディングしていく事は多いかと思いますが、そのデフォルトの仕様に加えておくべき設定が下記になります。ほとんどのケースではこれが加えられているのではないでしょうか。

img{
  max-width: 100%;
  heigth: auto;
  vertical-align: bottom;
}

この3つは必須と言ってもいいほどに必要です。
個人的にはここにborder: none;もデフォルト仕様にしています。

max-width: 100%;これを指定することによって、imgが親要素の枠内で最大100%のサイズで表示できます。これを入れておかないと、例えば親要素のサイズが800pxなのに、画像が1,200pxだったりすると、親要素からはみ出てしまったりします。

max-width: 100%;を入れておけば、親要素が800pxであれば、画像サイズが1,200pxであったとしても、親要素の最大サイズ内におさめることができます。

height: auto; は親要素のサイズによって、画像の横幅が変わった際に縦横比が変わらずに拡大縮小されるための設定です。

そして、vertical-align: bottom;こちらですが、一種の呪文のようなでもありますが、これを指定することによって、画像の下に入ってしまう小さな余白の発生を防ぐことができます。

もうこの3つは絶対に必須と言っても過言ではないので入れておくのが吉です。

デモページ

img要素にサイズは設定せずblock要素で囲んで設定

コーディングをしていく際、画像のサイズというのはレイアウトや使われるシーンによって様々です。

大きいサイズもあればとても小さいサイズもあり様々ですが、この時に注意すべきなのがimg要素にはなるべくサイズ指定をせず、imgを<p>や<figure>、<div>、<li>、<dt>、<dd>などのblock要素の囲ってそこにサイズ指定をします。

先ほどのデフォルトの仕様でもあったように、画像にmax-width: 100%;を設定しておくと、親要素のサイズより小さければそのまま表示、親要素より大きければ親要素のサイズに自動的に合わせてくれます。

img要素には、border関連だったりそういったものを設定してサイズは親要素で設定しておくというのがオススメです。

この使い方を心がけるだけで、コーディング時に画像のサイズがおかしい、はみ出るといった事はほとんど無くなるのではないかと思います。

デモページ

レスポンシブなどで縦横比が変わるレイアウトの場合の対処

デザインなどによっては、PC向けのレイアウトとTBやSP向けのレイアウトなどで、画像の縦横比が真逆になるようなレイアウトも出てきます。

特に左右2カラムのような画像＋テキストという見せ方で、画像が正方形＋その横にテキストという見せ方はよくあるかと思います。

ただこれはPCなど横長モニタでは正方形サイズの画像は問題ない表示ですが、スマホなどで正方形画像を表示すると、画面の大半を画像が占めてしまう形になりあまり良いレイアウト・デザインにならないとう弊害が出る事があります。

そういった場合に使いやすい要素しては、主に2つかなと考えています。

• pictureでPC用とSP用をそれぞれ用意して切り替える
• object-fitを使う

それぞれ使い方はレイアウトやデザイン次第かとは思いますがこの2つを覚えておけばだいたいは対処ができるのではないかなと思います。

pictureを使って縦横比が異なる画像に対処する

これはもうタグの使い方を覚えるのが一番です。細かいところを設定なども色々ありますが、ざっくり説明すると、こんな感じでしょうか。

<picture>
  <source srcset="/assets/img/sample_pc.jpg" media="(min-width: 1000px)" width="500" height="500">
  <img src="/assets/img/sample_sp.jpg" width="600" height="300" alt="">
</picture>

このpictureタグを使う事で、PCサイズ（上記のタグ設定は1,000px）は正方形の画像、TBやSPなど縦長モニタ用には、横長画像を表示するといった見せ方が可能になります。

デモページ

object-fitを使ってcssで画像をトリミングする

もう1つの方法が、object-fitを使う設定方法です。
先ほどのように、PCとスマホなどで画像を変えるほどではないが、横長画像を正方形にする際にcssでトリミングをするというものになります。

object-fitには、

• fill（初期値：指定しなければこれ）
• cover
• contain
• scale-down
• none

と設定がありますが、実際のコーディングで使うのは、ほぼcoverになるのではないかと思われます。

img{
  width: 200px;
  height: 400px;
  object-fit: cover;
}

通常の設定だと例えば正方形画像に300 ×100の設定をすると、元画像を無理矢理圧縮したような画像になっておかしな画像になりますが、object-fit: cover;を記載しておくと、300 × 100の指定したサイズにトリミングしてくれるようになります。

デモページ

トリミングされる位置は、ちょうど画像の中央からトリミングされることになりますが、object-positionの設定によって場所を変えることは可能です。

img{
  width: 200px;
  height: 400px;
  object-fit: cover;
  object-position: right bottom;
}

こうすることで、右下をスタート地点としてトリミングされることになります。

デモページ

まとめ

自分がコーディングで慣れていると思っても、たまーに画像のcss設定であれ？というシチュエーションに出くわす事があったりします。

とはいえこの基本をしっかりと頭に入れておくと、あ、しまった…でも、これのせいだな！とすぐ気付ける事にも繋がりますので、画像のサイズや縦横比がおかしいといった事に出くわす可能性もグンと減っていくかと思いますので、試してみてください。