css js 实现图片居中裁剪成正方形（不变形）

0
发布于 by 博主

网页中如何使用 css + js 实现图片居中裁剪成正方形，并且不变形？

实现思路是先获取图片的宽高，比较一下大小然后设置图片的宽或者高为 100% 高或者宽为 auto；然后设置图片父元素为 flex 布局，其子元素（图片）上下左右居中即可。

详细代码如下：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>图片自动截取中间正方形显示</title>
    <!--适应移动端-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--css样式-->
    <style>
        body {
            background-color: #000;
            color: #fff;
        }
    </style>
</head>

<body>
    <div style="width: 100px;height: 100px;overflow:hidden;display: flex;justify-content: center;    align-items: center;">
        <img src="https://www.a4z.cn/img/a4p.jpg" id="img" style="flex: none;" />
    </div>

    <span id="console"></span>

    <script type="text/javascript">
        var $img = document.querySelector('#img');
        getRealImageSize($img.src, function(width, height) {
            if (width > height) {
                $img.style.height = '100%';
                $img.style.width = 'auto';
            } else {
                $img.style.width = '100%';
                $img.style.height = 'auto';
            }
        });

        function getRealImageSize(url, callback) {
            var img = new Image();
            img.src = url;

            // 如果图片被缓存，则直接返回缓存数据
            if (img.complete) {
                callback(img.width, img.height);
            } else {
                // 完全加载完毕的事件
                img.onload = function() {
                    callback(img.width, img.height);
                }
            }
        }
    </script>

</body>

</html>

浏览次数: 2,705