アスペクト比(縦横比)を限定する方法 基本編 まずは基本編。: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">