鶏口牛後な日々

魔法使い(なんでも作れるエンジニア)を目指してます。ブログは発散中

CSSで縦横比(アスペクト比)を固定したい

ブロック要素で縦横比(アスペクト比)を固定したいと思いました。

結論としては、 padding-top を使うとうまくいきました。

CSS(stylus)】

.box
    width 100%
    height auto
    padding-top 65%

アスペクト比固定イメージ
アスペクト比固定イメージ

備忘まで。