大手ストックフォトサイト「gettyimages」の画像を、非商用限定ながら無料でブログに埋め込むことが出来るようになりました。

「埋め込み投稿が可能な画像を検索する」

手順は</>ボタンをクリックして画像を読み込むiframeタグを取得し、貼り付けるだけ。

これでgettyimagesの画像がブログに表示されます。

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

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