要素の横幅をうまくリキッドに実装したけど、うまく縦横非が維持できない。

そんな時の処方箋です。

アスペクト比（縦横比）を限定する方法

基本編

まずは基本編。:bofore要素を利用して

HTML:

<div class="container">
  <!-- なんでも要素 --->
</div>

CSS:

.container:before{
  content:'';
  display:block;
  width:100%;
  height:0;
  padding-bottom:75%;
}

ポイントは、padding-bottomで、こちらは％指定だと、「親要素の横幅を基準に」という仕様です。仕様です。containerの横幅に合わせて、伸縮します。

上記だと、要素内をbeforeが専有してしまうので、containerの子供は、position:absoluteしておくとよいでしょう。

HTML:

<div class="container">
  <img src="hogehoge.png">
</div>

CSS:

.container{
  position:relative；
}
.container:before{
  content:'';
  display:block;
  width:100%;
  height:0;
  padding-bottom:75%;
}

.container img{
  position:absolute;
  width:100%;
}

アスペクト比（縦横比）を固定したグリッド

応用編です。わかりにくいかな。３列のグリッドで、要素の縦横比を１：２にしています。

要素の背景が常にセンタリングなので、グリッドの大きさが変わっても、縦横比はたもったまま、うまく画像がトリミングされるようになります。