開発ブログ

WWWクリエイターズが送る、Git、CSS、HTML、コマンドライン、Macの便利機能など、開発に関する役立ち情報発信します。気まぐれに更新。

CSSで、要素のアスペクト比を維持して、拡大・縮小する方法

最終更新:2017-05-17 by Joe

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

そんな時の処方箋です。

アスペクト比(縦横比)を限定する方法

基本編

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

HTML:

CSS:

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

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

HTML:

CSS:

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

応用編です。わかりにくいかな。3列のグリッドで、要素の縦横比を1:2にしています。

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