正方形ではない画像を、正方形にトリミングしたり、縦横比を維持したまま正方形内に表示する（レスポンシブ対応）。
デモページを表示
CSS
補足
- 13～17行目：img 要素（透過PNG画像）の背景画像のスタイルを設定している。
- 19行目：frame-img クラスに加えて round クラスを設定すると正円でトリミングされる。。
- 23行目：frame-img クラスに加えて contain クラスを設定すると正方形内に縦横比を維持したまま表示される。
- レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。
jQuery
補足
- 4～6行目：img 要素の data-bg 属性で指定したファイルを img 要素（透過PNG画像）の背景画像に設定している。
- デモページで使用している jQuery のバージョンは 1.12.4 。
HTML
補足
- img 要素の src 属性には１ピクセル×１ピクセルの透過PNG画像を指定し、実際に表示する画像は data-bg 属性で指定する。
- 3行目：frame-img クラスだけの時は正方形にトリミングされる。
- 6行目：frame-img と round クラスを設定すると正円にトリミングされる。
- 9・12行目：frame-img と contain クラスを設定すると縦横比を維持したまま正方形に収まるように表示される。
関連投稿