gettyimagesの画像を「レスポンシブ」にする

ここからが本題です。

iframeで画像を読み込んでいるため、画像のサイズが固定されたままとなります。

これではレスポンシブWEBデザインのサイトで画像が正常に表示されないケースが出てきます。

というわけで簡単にレスポンシブ化させてみました。

YouTube向けCSSの使いまわしてOK！

この実装ですが、実はYouTube動画のレスポンシブ化記事のコードを１００％使いまわしています。

*元記事：3ステップでできる！CSSを使って動画をレスポンシブ化する方法

作業はGettyImagesのiframeを>div class=”youtube”<で囲い、以下のCSSを追加するだけ。

元記事でclass=”youtube”を使用している関係上のクラス値設定ですが、他のiframe要素にも使用できますので「iframe-cnt」などに書き換えるのも手かもしれません。

<div class="youtube">
<iframe src="//embed.gettyimages.com/embed/175545377?et=0H30dRUM4Eig2JDBuSzKKA&sig=adGnjOQbXKKXyBlnOkR-aKawOBEefCDqqsk2LzaKSbQ=" width="507" height="407" frameborder="0" scrolling="no"></iframe>
</div>

.youtube {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 20px;
}
.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

YouTube動画と異なり縦横比が一定でないため、元のコードよりも小さいサイズになる可能性があります。

ですがはみ出して全体が見えなくなるよりは遥かにマシですので、取り急ぎ対応されたい方は是非。

投稿 by モバイルファースト・マーケティングラボ.

商品の販売に“夢中”になれる

クラウド型ECサイト構築ASP