レスポンシブイメージの実装テク

主に社内勉強会向けに書きました。

画像リストやブロックの中に画像が入るようなケースを作成していると、画像のサイズが統一されている状態で並べて表示させると一見整って見えますが、必ずしも入ってくる画像サイズが同じとは限りません。ブラウザサイズやウインドウサイズで縦横比が変わってきたりすることもあります。

そこでよくつかわれる方法を考えてみます。

backgroundや、object-fitやmax-widthプロパティを使用することも多いかと思います。

background

.sampleImg {
  background-image: url("image.png");
  background-size: cover;
}

↑おなじみbackground

object-fit

img {
  width: 250px;
  height: 250px;
  object-fit: cover; /* これ */
}

↑ IEだとアレ

max-width

img { 
  height：auto; 
  width：100％;
  max-width：720px; /* これ */
}

↑ 一見よさげだけど状態によってはmax-width効かない問題はよくあります。

では他に方法はあるのかどうか

srcsetを使ってみましょう

<img src="img/sample-img.jpg"
     srcset="img/sample-img-320.jpg 320w,
             img/sample-img-640.jpg 640w"
     sizes="50vw">

320w, 640w って？
→ その画像を表示したい時のブラウザ幅です

sizesのvwとは？
viewport widthの略称らしく、viewportの幅に対する割合（％）を指します。

幅1000pxで開いている場合

100vw = 1000px * 100% = 1000px　
50vw  = 1000px * 50%  = 500px
30vw  = 1000px * 30%  = 約333px

sizesは

sizes="(max-width: 320px) 280px,
       (max-width: 480px) 440px"

のような複数指定もできる感じです。

srcsetはpictureタグでも使えます

<picture>
  <source media="(max-width: 799px)" srcset="hoge-480w.jpg">
  <source media="(min-width: 800px)" srcset="hoge-800w.jpg">
  <img src="hoge-800w.jpg">
</picture>

こんな感じで画面サイズによって違う画像を読み込ませることが
JSを使わずにHTMLだけで完結したりします。

ちなみにIEは対応してないので

IE対応としてpicturefillというライブラリを導入すると幸せになれそうな気配です。

参考