Webサイト制作で使える、コーディングテクニックを紹介
2015.06.28
2016.10.30
2016.08.01
2015.09.10
2017.01.22
2016.07.24
2016.02.20
2017.03.05
2016.09.02
2016.07.13
2015.10.25
2015.09.04
2015.09.01
HOME > CSS > 画像をレスポンシブに対応させる
大きな写真などの画像を、画面サイズや親要素のサイズによって 縦横比を維持したままサイズを変更させます。
img { max-width: 100%; height: auto; }
サンプルページはこちら
ブラウザの横幅を変更してみてください。 最大1000pxで、それより狭い場合は縦横比を維持したまま拡大・縮小します。
主にスマートフォンサイトで力を発揮すると思います。