ミギムキ

[CSS] GoogleマップやYoutubeを縦横比率を合わせつつ幅いっぱいに表示したい

やりたいこと

サンプルコード

html

<div class="if_wrapper"> <!-- 設置コード -> </div>

CSS

.if_wrapper { position: relative; padding-bottom: 56.25%; } .if_wrapper > iframe { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }

仕組み、解説、補足など

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。