読者です 読者をやめる 読者になる 読者になる

Fluid Image(フルードイメージ)

レスポンシブWebデザイン

Fluid Image(フルードイメージ)

  • 画像のサイズをデバイスの可変に合わせて、画像の表示領域も変化させる手法
max-width: 100%;
.box1 {
  height: auto;
}
.box1>img {
  vertical-align: bottom;
  max-width: 100%;
}

f:id:web-design-lesson:20160604230431p:plain

ただしこのまま、スマートフォンの幅に対応させてしまうと画像が小さくなり見えにくい状態になってしまうため注意が必要です。
今後は、高解像度デバイスへの対応も必要とされてきます。