图片宽高自适应，居中裁剪不失真
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>
以上是关于图片宽高自适应，居中裁剪不失真的主要内容，如果未能解决你的问题，请参考以下文章