地図の埋め込みなどで使うiframeのcssについてメモ。
基本
iframe { max-width: 100%; max-height: 600px; } @media screen and (max-width:768px) { iframe { max-height: 350px; } }
heightをautoにしたりすると、妙に狭くなっったりして変になるので、max値を指定。
iframe埋め込み
ワードプレスのページに埋め込むときとかに使う書き方。
.access-body というのはiframeをラップしているdivタグについているクラスです。
.access-body { position: relative; width: 100%; padding-top: 50%;/* = height ÷ width × 100 */ } .access-body iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media screen and (max-width: 500px) { .access-body { height: 320px; } }
absoluteで上記のように埋め込んでいる場合はiframeタグへ指定している内容が効かないようなので(iframe {max-height: 350px;}の部分)、
個別にモバイル時の高さを指定してあげます。