一，使用 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>

HTML5 图片宽高自适应，居中裁剪不失真的更多相关文章

  1. css+background实现 图片宽高自适应，拉伸裁剪不变形

    图片宽高不固定 ,一样实现自适应,拉伸裁剪不变形,适应各大兼容性.  下面咱们在网上找两张宽高不一样的照片:     No.1                                      ...

  2. jquery操作html中图片宽高自适应

    在网站制作中如果后台上传的图片不做宽高限制,在前台显示的时候,经常会出现图片变形,实用下面方法可以让图片根据宽高自适应,不论是长图片或者高图片都可以完美显示. $("#myTab0_Cont ...

  3. JS实现图片宽高的等比缩放

    关于图片宽高的等比缩放,其实需求就是让图片自适应父容器的宽高,并且是等比缩放图片,使图片不变形. 例如,需要实现如下的效果: 要实现上面的效果,需要知道图片的宽高,父容器的宽高,然后计算缩放后的宽高. ...

  4. 从零开始学习前端开发 — 7、CSS宽高自适应

    一.宽度自适应 语法:width:100%; 注: a)块状元素的默认宽度为100% b) 当给元素设置宽度为100%时,继承父元素的宽度 c) 通常使用宽度自适应实现通栏效果 二.高度自适应 语法: ...

  5. php 图片上传的公共方法（按图片宽高缩放或原图）

    写的用于图片上传的公共方法类调用方法: $upload_name='pic';$type = 'logo_val';$file_name = 'logo_' . $user_id .create_st ...

  6. css3圆形头像（当图片宽高不相等时）

    1.图片宽高相等,width:300px: height:300px; 把他变成宽高100px的圆形头像 img{width:100px; height:100px; border-radius:50 ...

  7. JS快速获取图片宽高的方法

    快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一 ...

  8. 007. 自定义ListBox的item的宽高, 字体居中

    /// <summary> /// 自定义ListBox的item的宽高, 字体居中 /// </summary> /// <param name="sende ...

  9. 转载：JS快速获取图片宽高的方法

    快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一 ...

随机推荐

  1. Centos7 在 Xshell里 vim的配置

    Centos里的VI只默认安装了vim-minimal-7.x.所以无论是输入vi或者vim查看文件,syntax功能都无法正常启用.因此需要用yum安装另外两个组件:vim-common-7.x和v ...

  2. 【Web前端】清除css、javascript及背景图在浏览器中的缓存

    在实际项目开发过过程中,页面是上传到服务器上的.而为了减少服务器的压力,让用户少加载,浏览器会将图片.css.js缓存到本地中,以便下次访问网站时使用.这样做不仅减少了服务器的压力,并且也减少了用户的 ...

  3. [UE4]正交

    一.如果两条直线是垂直的,那么就可以说这2条直线是正交的.既然有垂直,为什么还要有正交概念呢? 因为正交可以描述两个或者多个变量之间互不影响.互不干涉,而垂直是完全属于几何的术语. 二.具有正交关系的 ...

  4. eMTC/NB/LTE拨号

    挂起-恢复流程挂起恢复流程是eMTC/NB-IoT等蜂窝物联网技术才引进的,LTE并不具备这样的流程.这种机制的引入主要针对物联网海量连接,不活跃小数据包的特点,适时的挂起流程可以减少网络的资源开销, ...

  5. mac一些设置

    Mac自带了的JDK6,安装在目录:/System/Library/Java/JavaVirtualMachines/1.6.0.jdk/下. JDK8则需要自己到Oracle官网下载安装对应的版本. ...

  6. Android7.0对dlopen的改变——读取私有.so结果变化

    两个内存段 在同一个进程空间中dlopen一个.so文件,理论上在内存中是同一片区域,但实际调试中发现Android7.0(read "/proc/self/maps")中,先后读 ...

  7. 解决 WordPress 4.9 页面模板功能无法正常使用

    WordPress 4.9 有一个重要更新是:在WP后台编辑主题和插件文件时,支持按层级显示所有文件.为了性能考虑,使用了 transient 缓存机制.但是却没有提供任何手动清除缓存的功能,导致有些 ...

  8. python2.7中不同类型之间的比大小

    可以看到,字符串为空的时候也比数字类型大,这是因为python2.7中按照如下规则进行比较: 1.任何两个对象都可以比较. 2.相同类型的对象(实例),如果是数字型(int/float/long/co ...

  9. 错误为Lc.exe已退出，代码为-1

    近来在做项目的时候,突然遇到 了 LC.exe 已退出,代码为-1 的提示,怎么也编译不了,在查了相关的资料后,终于明白了原因,其解决方案如下 : 1. 以管理员的身份来运行vs, 并把项目中“pro ...

  10. 获取cookie后，使用cookie进行接下来的自动化操作

    System.setProperty("javax.net.ssl.trustStore", certPath); public void uploadComponent() th ...