私はbootstrapを使用しており、Google Maps API 3を埋め込んでいます。
#map_canvasレスポンシブではありません。幅は固定されています。
また、 を使用するとheight: autoページwidth: autoに地図が表示されません。
なぜ？
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
#map_canvas {
height: 400px;
width: auto;
}
</style>
<div class="container">
<div class="row">
<div class="span6">
<div id="map_canvas"></div>
</div>
</div>
</div>
ベストアンサー1
改訂: 公式投稿は古くなっているため、回答を更新し、コードを改善しました。
以下の方法ブートストラップやその他のフレームワークを必要としません. コンテンツをレスポンシブにするために独立して使用できます。親要素には、計算によってパディングが適用されます。aspect ratio次に、絶対位置を使用して子要素を一番上に配置します。
HTML:
<div class="iframe-container">
<!-- embed code here -->
</div>
CSS:
.iframe-container{
position: relative;
width: 100%;
padding-bottom: 56.25%; /* Ratio 16:9 ( 100%/16*9 = 56.25% ) */
}
.iframe-container > *{
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
次の「フィドル」には作成方法の例があります。
- レスポンシブGoogleマップ
- レスポンシブ OpenStreetMap
- レスポンシブ Vimeo ビデオ
- レスポンシブな YouTube ビデオ