CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | .frame-img { display: block; margin: 0 auto; /* 必要であれば指定 */ padding: 0; /* 〃 */ border: 0; /* 〃 */}.frame-img > img { width: 100%; height: auto;}.frame-img > img { /* img 要素の背景画像のスタイル */ background-repeat: no-repeat; background-position: center center; background-size: cover;}.frame-img.round > img { border-radius: 50%; /* 正円でトリミングする */}.frame-img.contain > img { background-size: contain; /* トリミングしないで収める */} |
補足
- 13～17行目：img 要素（透過PNG画像）の背景画像のスタイルを設定している。
- 19行目：frame-img クラスに加えて round クラスを設定すると正円でトリミングされる。。
- 23行目：frame-img クラスに加えて contain クラスを設定すると正方形内に縦横比を維持したまま表示される。
- レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。
jQuery
1 2 3 4 5 6 7 8 9 | $(function(){ $(window).on('load', function(){ $('img[data-bg]').each(function(){ $(this).css('background-image', 'url(' + $(this).attr('data-bg') + ')'); }); });}); |
補足
- 4～6行目：img 要素の data-bg 属性で指定したファイルを img 要素（透過PNG画像）の背景画像に設定している。
- デモページで使用している jQuery のバージョンは 1.12.4 。
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 | <dl> <dt>正方形でない画像を<b>正方形にトリミングして表示</b></dt> <dd><span class="frame-img"><img alt="画像" src="./files/spacer-1x1.png" data-bg="./files/image-05.jpg" /></span></dd> <dt>正方形でない画像を<b>正円でトリミングして表示</b></dt> <dd><span class="frame-img round"><img alt="画像" src="./files/spacer-1x1.png" data-bg="./files/image-05.jpg" /></span></dd> <dt>正方形でない画像を<b>正方形内に収まるよう表示（１）</b></dt> <dd><span class="frame-img contain"><img alt="画像" src="./files/spacer-1x1.png" data-bg="./files/image-05.jpg" /></span></dd> <dt>正方形でない画像を<b>正方形内に収まるよう表示（２）</b></dt> <dd><span class="frame-img contain"><img alt="画像" src="./files/spacer-1x1.png" data-bg="./files/image-06.jpg" /></span></dd></dl> |
補足
- img 要素の src 属性には１ピクセル×１ピクセルの透過PNG画像を指定し、実際に表示する画像は data-bg 属性で指定する。
- 3行目：frame-img クラスだけの時は正方形にトリミングされる。
- 6行目：frame-img と round クラスを設定すると正円にトリミングされる。
- 9・12行目：frame-img と contain クラスを設定すると縦横比を維持したまま正方形に収まるように表示される。