画像の伸縮に使えるクラス

画像の伸縮に使えるクラス

2020/12/22 updated.

画像の伸縮に関するimg用のクラスです。

  • アスペクト比は保持されます。

サンプル

spFit

  • PCでは任意の固定幅
  • SP&Tabでは100%幅

に画像を伸縮させます。

サンプル

fit

PC/Tab/SP全てで親要素幅100%
※サンプルはPC時親要素幅50%です。

サンプル

round

border-radius:50%;を指定し画像を円にします。元画像が正方形の必要があります。

サンプル

aspOfit

画像を規格アスペクト比のサイズで切り抜きます。サンプルは16:9、切り抜き位置は中央です。

  • アスペクト比3:2、4:3、16:9は予めクラスが用意されています。
  • 親要素にアスペクト比のクラス、imgに「aspOfit」をクラス指定します。
  • 【注意】IE、Edgeはバージョンにより対応していません。