アスペクト比を保つ

f:id:ryotah:20170619205403p:plain

「padding-topに%を設定すると、包括しているブロックの幅を基準にする」という仕様を利用します。

padding-top - CSS | MDN

以下のコードは、アスペクト比を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>