Image

画像に使用するCSS

詳しい導入事例は導入方法を参照してください。

  • DEMO

Class Copy

使い方

Baseクラスだけで{object-fit: cover;}を付与しています。

  • CSS
/* object-fit */
  .fit {width: 100%; height: 100%; object-fit: cover;}
  .fit.contain {object-fit: contain;}

  /* aspect-ratio */
  .rto.asp11 {aspect-ratio: 1/1;}
  .rto.asp169 {aspect-ratio: 16/9;}
  .rto.golden {aspect-ratio: 1.618/1;}
  .rto.silver {aspect-ratio: 1.414/1;}

比率指定

画像用ではないけど画像に使うことが多いので

  • 1:1
  • 16:9
  • 黄金比
  • 白銀比

Class Copy