ブラウザ幅に合わせて拡大縮小しつつ縦横比を一定にしたい時のCSSはこの方法

スマートフォンやタブレットに対してワンソースで対応するレスポンシブルサイトが流行ってきているが、テキストの流し込みやGoogleMapの表示を常に一定の縦横比で表示するようにしたい時はこんなスタイルシートを使うといい。

通常のエリアの場合

ブラウザ幅に合わせてレスポンシブルに横のサイズが追従しつつ、エリアの縦横比は固定したい時

CSS

.aspectwrapper{

position: relative;
}
.aspectwrapper:after{
padding-top: 75%;
display: block;
content: "";
}
.aspectwrapper > .content{
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
}

HTML

<div class="aspectwrapper">
<div class="content">テキストテキストテキストテキストテキストテキスト</div>
</div>

ブラウザの幅を拡大縮小するとcontentのエリアの天地も変わることがわかるだろう。

ただし、この方法はGoogleMapではうまくいかない。

GoogleMapを使い、ブラウザ幅に合わせてレスポンシブルに地図を拡大縮小しつつ、マップの縦横比は一定にしたい時はこの方法

CSS

.aspectwrapper {
margin: 10px 0px;
position: relative;
/*padding-bottom: 75%;*/ /* アスペクト比4:3 */
padding-bottom: 56.25%; /* アスペクト比16:9 */
height: 0;
overflow: hidden;
}
.aspectwrapper #map_canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

HTML

<div class="aspectwrapper">
	<div id="map_canvas"></div>
</div>

GoogleMapの表示自体は、いつも通りJavascriptを使いmap_canvasに描画すればいい。