HTML中img标签只显示图片中心位置的方法(三种方法)

htML中 img标签显示图片中心的方法目前知道三种，在此记录一下

第一种：用到css的clip:rect(top right bottom left); 用法，需要配合posITion: absolute使用：如下

img src="http://img2.utuku.china.COM/640x0/news/20170210/77b8b5ca-11d3-4307-9a93-c12DF5eb1a35.jpg"     style="position: absolute;
    clip: rect(0px,250px,200px,50px);
    width: 300px;
    height: 200px">
    

设置图片的width和height相当于图片实际宽高的等比例缩放，再用rect方法来设置图片的剪切范围。

- 第二种：用img的background属性：

style tyPE="text/css">
        img {
                background-image: url(http://img2.utuku.china.com/640x0/news/20170210/77b8b5ca-11d3-4307-9a93-c12df5eb1a35.jpg);
    //设置背景图片            background-repeat: no-repeat;
    //背景图像将仅显示一次。            background-attachment: scroll;
    //            background-position: -50px 0px;
    //设置背景图片的的偏移量，这个-50相当于背景整体向左偏移50，就可以显示图片的中心            background-size: 300px 200px;
    ////设置背景图片的大小，相当于图片实际宽高等比例饿缩放的            background-color: transparent;
    //            width: 200px;
    //            height: 200px;
//        }
        /style>
    

用背景来控制图片显示中心位置，需要设置背景按照图片的真实宽高等比缩放，然后偏移背景的移动量来控制图片的宽高，这个需要注意的是不能图片的src,img标签不设置src时候，显示的图片会出现一条灰色的边框，而且没有办法去掉，border:0px也没有作用，我之前的解决办法是放一张默认的全透明的图片在src中，就可以解决了。

第三种：在div中包含img，用div的overflow: hidden; 来控制，用起来比较灵活，

div style="width: 100px;
    height: 100px;
    overflow: hidden">
    img src="http://img2.utuku.china.com/640x0/news/20170210/77b8b5ca-11d3-4307-9a93-c12df5eb1a35.jpg" style="position: relative" id="img_id">
    /div>
    script>
        VAR img = document.getElementById("img_id");
        var image = new Image();
        var realWidth = 0;
    //储存图片实际宽度    var realHeight = 0;
    //储存图片实际高度    //获取图片的宽高    image.src = "http://img2.utuku.china.com/640x0/news/20170210/77b8b5ca-11d3-4307-9a93-c12df5eb1a35.jpg";
    //加载成功的处理    image.onload = function () {
            realWidth = image.width;
    //获取图片实际宽度        realHeight = image.height;
    //获取图片实际高度        //让img的宽高相当于图片实际宽高的等比缩放，然后再偏移        if (realWidth >
 realHeight){
                img.width = (100/realHeight)*realWidth;
    //等比缩放宽度            img.height = 100;
    //跟div高度一致            img.style.left = '-' + ((100/realHeight)*realWidth-100)/2 + 'px';
//设置图片相对自己位置偏移为img标签的宽度-高度的一半        }
else if (realWidth  realHeight){
                img.width =100 ;
    //跟div高度一致            img.height = (100/realWidth)*realHeight;
    //等比缩放高度            img.style.top = '-' + ((100/realWidth)*realHeight-100)/2 + 'px';
//设置图片相对自己位置偏移为img标签的高度-宽度的一半        }
else {
                img.width =100 ;
                img.height = 100;
        }
    }
    ;
    //图片加载失败的处理    img.onerror = function () {
            img.src = "https://timgsa.baidu.com/timg?image&
    quality=80&
    size=b9999_10000&
    sec=1492076382452&
    di=04ebd6c4688b2ffbd8ae18e685234704&
    imgtype=0&
    src=http%3A%2F%2Fd.hiphotos.baidu.com%2FzhiDAO%2Fwh%253D450%252C600%2Fsign%3D0c96dc86da33c895a62b907fe4235fc6%2F0823dd54564e9258d2bb2dff9f82d158ccbf4e17.jpg";
            img.width =100 ;
            img.height = 100;
    }
    /script>
    

上面注释已经很清楚了，主要是div控制了大小，img标签根据div的大小来调节自身的大小。在进行偏移，从而达到显示图片中间部分的图片。个人觉得第三种方法比较好用。

以上所述是小编给大家介绍的HTML中img标签只显示图片中心位置的方法(三种方法)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！