图片宽高自适应，居中裁剪不失真

最新推荐文章于 2024-04-20 13:50:15 发布

weixin_34343000

最新推荐文章于 2024-04-20 13:50:15 发布

阅读量803

点赞数

文章标签： javascript ViewUI

一，使用 JS，先上效果图，右图为定死宽高的效果，左图为处理之后的

1，主要思路是，在图片 onload 后，将图片的宽高比和 div 容器的宽高比进行比较，

2，从而确定拉伸或者压缩之后是宽还是高不足以填充容器

3，将不足以填充容器的方向设置为和容器一致

4，此时，图片的另一个方向可能超出容器，此时只要将图片做反方向的偏移，使其居中

5，容器定义超出部分不显示，以下是结合 Vue 的一个例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片居中</title>
    <link rel="stylesheet" href="../../common/css/common.css">
    <script src="../../common/js/common.js"></script>
    <script src="../../common/js/vue.min.js"></script>
    <style type="text/css">
        #main {
            font-size: 0;
        }
        .box {
            display: inline-block;
            vertical-align: center;
            width: 150px;
            height: 150px;
            overflow: hidden;
            margin: 50px 0 0 20px;
        }
    </style>
</head>
<body>
<div id="main">
    <div class="box" v-for="(item, i) in srcs">
        <img :src="item" @load="resizeImg($event, 150, 150)">
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        data: {
            srcs: [
                "http://img.zcool.cn/community/01b34f58eee017a8012049efcfaf50.jpg@1280w_1l_2o_100sh.jpg",
                "http://img17.3lian.com/d/file/201703/07/4ceeb6fc3d7956ac7731290a603e0a84.jpg",
                "https://up.enterdesk.com/edpic_source/f5/34/83/f53483429ccc69d00ae98dd5f05317a4.jpg",
                "http://img.taopic.com/uploads/allimg/131125/240503-1311250IT642.jpg"
            ]
        },
        methods: {
            // 对图片大小调整，使其能够刚好充满容器, 多余方向裁剪使得图片不变形
            resizeImg: function (ev, w, h) {
                var img = ev.target;
                console.log(img)
                var scalebox = w / h, shifting = 0;
                var scaleImg = img.width / img.height;
                if (scalebox > scaleImg) {
                    img.width = w;
                    shifting = parseInt((img.height - h) / 2);
                    img.style.marginTop = 0 - shifting + 'px';
                } else {
                    img.height = h;
                    shifting = parseInt((img.width - w) / 2);
                    img.style.marginLeft = 0 - shifting + 'px';
                }
            }
        }
    }).$mount("#main");
</script>
</body>
</html>

二，使用 CSS 的 backgroud-image，backgroud-size，backgroud-postion 属性，这个比较简单，兼容性也比较好，推荐使用

注意，绑定数据的时候，使用 backgroud-image 不要使用 backgroud，否则会覆盖 backgroud-size，backgroud-postion 这两个属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片居中</title>
    <link rel="stylesheet" href="../../common/css/common.css">
    <script src="../../common/js/common.js"></script>
    <script src="../../common/js/vue.min.js"></script>
    <style type="text/css">
        #main {
            font-size: 0;
        }
        .box {
            display: inline-block;
            vertical-align: top;
            margin: 50px 0 0 20px;


            width: 150px;    /* 容器必须设置宽高 */
            height: 150px;

            background-size: cover;  
            background-position: center center;
        }
    </style>
</head>
<body>
<div id="main">
    <div class="box" v-for="(item, i) in srcs" :style="{'background-image': 'url(' + item + ')'}"></div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        data: {
            srcs: [
                "http://img.zcool.cn/community/01b34f58eee017a8012049efcfaf50.jpg@1280w_1l_2o_100sh.jpg",
                "http://img17.3lian.com/d/file/201703/07/4ceeb6fc3d7956ac7731290a603e0a84.jpg",
                "https://up.enterdesk.com/edpic_source/f5/34/83/f53483429ccc69d00ae98dd5f05317a4.jpg",
                "http://img.taopic.com/uploads/allimg/131125/240503-1311250IT642.jpg"
            ]
        }
    }).$mount("#main");
</script>
</body>
</html>

weixin_34343000

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
图片宽高自适应，居中裁剪不失真

一，使用 JS，先上效果图，右图为定死宽高的效果，左图为处理之后的1，主要思路是，在图片 onload 后，将图片的宽高比和 div 容器的宽高比进行比较，2，从而确定拉伸或者压缩之后是宽还是高不足以填充容器3，将不足以填充容器的方向设置为和容器一致4，此时，图片的另一个方向可能超出容器，此时只要将图片做反方向的偏移，使其居中5，容器定义超出部分不显示，以下是结合 Vue 的一个例...
复制链接

扫一扫