2016年1月アーカイブ

レスポンシブWebデザインでWebサイトを作っている時に便利な方法ですが、例えば、PCでは画像、スマートフォンではテキストというように、切り替えたいコンテンツが有るとします。

基本となる画像サイズを横900px・縦300pxとすると、縦横比は33.33%になります。

こういう場合、画像は『img』タグで指定しないで、CSSの『background』で背景画像として指定します。

デモページ

(X)HTMLコード

<div class="bg">テキスト</div>

というようにし、画像を表示させるCSSは、

CSSコード

@media screen and ( min-width:768px) {
    .bg {
        text-indent:-9999px;
        display:block;
        width:100%;
        height:0;
        padding-top:33.33%;
        background:url(photo.jpg) no-repeat 0 0;
        background-size:contain;
    }
}

というようにします。 テキストを表示させるCSSは、特にテクニックは必要ないので、ここでは割愛します。

『background-size:contain;』は、『縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する』ものです。

高さは、『heightは0』にして、『padding-top』で算出するようにします。これは、以前、Youtube動画をレスポンシブWebデザイン対応にさせる方法で紹介したテクニックです。

こういうように、縦横比を維持したまま、拡大・縮小させたいコンテンツがある場合、とても使えるテクニックなので、是非覚えておきたいものですね。