アスペクト比を保つ
「padding-topに%を設定すると、包括しているブロックの幅を基準にする」という仕様を利用します。
以下のコードは、アスペクト比を4:3にする場合。
.a43 { border: 1px solid #000; width: 160px; position: relative; } .a43:before { content: ''; display: block; /* アスペクト比 4:3 */ padding-top:75%; } .a43-inner { position: absolute; top: 0; }
<div class="a43"> <div class="a43-inner"> foo<br> bar </div> </div>