HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう | Kia King
WEBでレスポンシブ対応するときに結構大変なのが画像の扱い。iPhone等の高解像度デバイス(Retinaディスプレイ等)には2倍の画像を用意する必要があるし、最近は画面のサイズに会わせて画像を切り替えたい場合も多い。そんな時にHTML5のsrcsetがすこぶる便利だったのでご紹介します。 srcsetでできること 次のようなことが可能になります。 Retinaディスプレイ用に画像を切り替える ウィンドウサイズに合わせて画像を切り替える ウィンドウサイズに合わせて動的に画像を切り替える Retinaディスプレイ用に画像を切り替える 基本的な使い方は下記のような感じでimgタグに使用します。シンプルですね。 <img src="img/example-img.jpg" srcset="img/example-img.jpg 1x, img/example-img@2x.jpg 2x" alt
background画像をレスポンシブに対応させる方法
backgroundで背景設定を作ると思わぬ所でつまづいてしまったので、その解決方法を記事にしてみました。なお今回はcreative memomemoさんの記事を参考にさせて頂いております。 background指定した画像を拡大縮小する方法 背景画像を可変で表示したいだけなのですが、これが曲者でbackground(背景画像)で指定した画像はheight(高さ指定)の基準がないと表示されない欠点があります。ならば指定すればいいのですが高さを設定をするとウィンドウサイズの拡大縮小時に高さ分の余白残りや画像切れをおこします。 高さ設定した場合、画像のように高さの値はそのままなので余白が残ってしまいます。 height:0;でpadding-topで高さ(余白)を設定 高さが与えられないならばどうしたものかと色々探した結果、paddingでの余白空けという発想に辿り着きました。ポイントはhei
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
