長方形の画像を縦横比を維持したまま正方形内に表示する方法を紹介します。
HTML
補足
- まず、「縦横比を維持したまま横幅いっぱいに画像を表示」で紹介した方法で画像を表示します。
- 次に画像を含むブロック要素（サンプルでは table 要素）に img-contain または img-cover クラスを付けます。
jQuery
補足
- img-contain または img-cover クラス内の .frame-img クラスを探し、その子要素の img 要素を非表示にしています。
- 次に img 要素に指定されている画像の url を .frame-img クラスの background-image に設定しています。
CSS
補足
- .frame-img クラスを正方形にするため、padding-top: 100% を指定しています。
- 画像を正方形内に、どう表示するかは、background-size の contain と cover で切り替えています。