html レスポンシブ的GoogleMap

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html レスポンシブ的GoogleMap相关的知识,希望对你有一定的参考价值。

.google-map {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
}
.google-map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
<div class="box_in">
		<div class="google-map">
			<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d25934.16131320576!2d139.68412633798107!3d35.65803388019965!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b563b00109f%3A0x337328def1e2ab26!2z5riL6LC36aeF!5e0!3m2!1sja!2sjp!4v1515237636521" width="100%" height="457" frameborder="0" style="border:0" allowfullscreen></iframe>
		</div>
</div>

以上是关于html レスポンシブ的GoogleMap的主要内容,如果未能解决你的问题,请参考以下文章

html レスポンシブ画像

html レスポンシブ対応metaと链接

html YouTube上の埋め込みをレスポンシブに

html レスポンシブ外部スタイル振り分け

scss レスポンシブ:リスト

scss レスポンシブテーブル