はじめに
最近HTML・CSSの勉強に夢中…。
そんな中、頭を悩ませてくれるレスポンシブ。
スマホで閲覧する人、パソコンで閲覧する人と複数のシチュエーションに合うようにサイトデザインを設定しなければならない。
今回は手軽に画像のサイズを画面に合わせて縮小・拡大させる設定方法について。
値は設定せずautoにする
サイズに合わせて自動的に画像のサイズを調整させる方法として、私自身が一番簡単だと感じた設定。
まず、高さか幅のどちらかを「%」で設定。
1-100の間で数値を入力。
例えば100%、90%や80%など。
画像が表示される領域に対してどのくらいの比率で表示させるかということ。
もしも幅を90%で設定するなら「width: 90%;」となる。
一方で、高さは「height:auto;」とすることで縦横比を保ったまま画面サイズに合わせて画像が拡大縮小されるのである。
正方形はもちろんのこと、長方形の画像でも自動的に調整してくれるとても便利な方法。
img{
width: 90%;
height: auto;
}
補足
画像の領域の中で適用させるということを示すために、「display: block;」を一緒に記述しておいたほうがいいかもしれない。
最後に
画像のレスポンシブにおいて@mediaを使用する方法など、色々調べた中で一番しっくり来たのがautoを使用するものだった。
簡単に使用できるもには初心者の私にとってはありがたい。
コメント