忍者ブログ
03 November

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

16 September

比率を保ったままレスポンシブにしたい

youtubeのiframeでよく使われるやつです
これを自分で作った画像RSSの（画像＋下テキストのやつ）横並び等に使用します。
padding-topの値を自由に変えて比率を調整します
画像のサイズがバラバラなときに使います。overflow:hidden;で切り。

http://design-spice.com/2014/03/24/percentag/

.iframe-wrapper{
    position: relative;
    height: 0;
    overflow: hidden;
    padding-top: 56.25%;
}
iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
PR