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

Posted lovling

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图片宽高自适应,居中裁剪不失真相关的知识,希望对你有一定的参考价值。

一,使用 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/[email protected]_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/[email protected]_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>

 




以上是关于图片宽高自适应,居中裁剪不失真的主要内容,如果未能解决你的问题,请参考以下文章

怎样让iframe中的内容的宽度和高度改变后,dialog的宽高自适应?

宽高自适应

宽高自适应,高度塌陷,伪对象选择符

宽高自适应浏览器兼容和表单高级属性

swift 字体自适应,宽高自适应

css宽高自适应