https://ningenzen.org/assets/clipsquareimage/jquery.clipsquareimage.js

1/**
2 * clipsquareimage.js
3 * ver.201611070000
4*/
5
6;(function($) {
7    'use strict';
8
9    $.fn.clipSquareImage = function(options) {
10        var settings = $.extend({
11            'adjustParentHeight': false
12        }, options);
13
14        return this.each(function() {
15            var $this = $(this);
16            var clipWidth = $this.parent().width();
17            var clipHeight = (settings.adjustParentHeight) ? $this.parent().height() : clipWidth;
18            var ratio, imageWidth, imageHeight, posLeft, posTop;
19
20            $this.parent().css({
21                'position': 'relative',
22                'display': 'block',
23                'height': clipHeight,
24                'overflow': 'hidden'
25            });
26
27            // 画像style
28            // "width: 100%"で仮リサイズ
29            $this.css({
30                'display': 'block',
31                'position': 'absolute',
32                'left': '0',
33                'top': '0',
34                'width': '100%',
35                'height': 'auto',
36                'margin': '0',
37                'padding': '0',
38                'max-width': 'none'
39            });
40
41            // clip高 > image高 → clip高でリサイズ
42            if (clipHeight > $this.height()) {
43                ratio = clipHeight / $this.height();
44                imageWidth = Math.floor($this.width() * ratio);
45                imageHeight = clipHeight;
46                posLeft = - (imageWidth - clipWidth) / 2;
47                posTop = 0;
48
49            // clip高 < image高 → clip幅でリサイズ
50            } else {
51                ratio = clipWidth / $this.width();
52                imageWidth = clipWidth;
53                imageHeight = Math.floor($this.height() * ratio);
54                posLeft = 0;
55                posTop = - (imageHeight - clipHeight) / 2;
56            }
57
58            $this.css({
59                'width': imageWidth + 'px',
60                'height': imageHeight + 'px',
61                'left': posLeft + 'px',
62                'top': posTop + 'px'
63            });
64
65        });
66    };
67}(jQuery));