11章. 画像のレスポンシブ

PCサイト：img要素 、スマホサイト：img要素の場合

PCサイト、スマホサイトともimg要素を使用する場合は、サイズの指定方法がポイントです。
width, heightプロパティの値「auto」をうまく使用していきます。
autoは、width, heightのどちらかにサイズ指定がある場合は、元画像のサイズから相対値で自動的に算出します。

/* 幅に対して、高さは自動調整の場合 */
img{
  width: 200px;
  height: auto;
}

/* 高さに対して、幅は自動調整の場合 */
img{
  width: auto;
  height: 200px;
}

width, heightどちらもautoの場合は変形されず画像の元サイズで表示されます。

/* 画像の元サイズで表示  */
img{
  width: auto;
  height: auto;
}

下記は、PCサイトはpx指定、スマホサイトは%指定して、可変幅にした指定です。

<img src="image/responsive-img01.jpg" alt="" width="1000" height="467">

/* スマホ 767px以下 */
@media only screen and (max-width: 767px){
  img{
    width: 100%;
    height: auto;
  }
}
/* pc 768px以上 */
@media only screen and (min-width: 768px), print {
  img{
    width: 1000px;
    height: auto;
  }
}

PCサイト：background-image、スマホサイト：img要素の場合

PCサイトとスマホサイトで画像を切り替えたい場合に有効な方法です。
ポイントは、img要素をほかの要素でラップし、CSSで画像の表示を切り替えます。
下記は、PCサイトではdiv要素の背景画像を表示し、img要素を非表示にしています。
スマホサイトは、img要素に%指定をし、可変幅にしています。

<div>
  <img src="image/responsive-img02.jpg" alt="" width="640" height="467">
</div>

@media only screen and (max-width: 767px){
  div{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  img{
    width: 100%;
    height: auto;
  }
}
/* pc 768px以上 */
@media only screen and (min-width: 768px), print {
  div{
    width: 1000px;
    height: 467px;
    margin-left: auto;
    margin-right: auto;
    background-image: url(../image/responsive-img01.jpg);
    background-repeat: no-repeat;
  }
  img{
    display: none;
  }
}

PCサイト：background-image、スマホサイト：background-imageの場合

ポイントは、背景画像の高さをpadding-topで行うこととbackground-sizeを利用する点です。
高さは可変したいのですが、heightプロパティで%指定してもうまくいきません。
この場合、padding-topを利用することで解決することができます。
まず、「画像の高さ ÷ 画像の幅」で高さの相対値を出します。それを背景画像を指定した要素のpadding-topに%指定するだけです。
多少誤差が出るため、小数点を切り捨てるか少し小さい値で調整するとよいでしょう。
下記は、PCサイトは固定サイズで背景画像を指定し、スマホサイトは可変サイズで背景画像を指定した例です。PCサイトも可変にしたい場合は、スマホ同様、padding-topで相対値を指定するとよいでしょう。

<div>
  <p>これは背景画像です。</p>
</div>

@media only screen and (max-width: 767px){
  div{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 72.9%;
    background-color: #333;
    background-image: url(../image/responsive-img02.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
  }
}
/* pc 768px以上 */
@media only screen and (min-width: 768px), print {
  div{
    /* 幅と高さは、画像のサイズと同じサイズで指定 */
    width: 1000px;
    height: 467px;
    margin-left: auto;
    margin-right: auto;
    background-image: url(../image/responsive-img01.jpg);
    background-repeat: no-repeat;
  }
}