Three methods in HTML to implement the img tag to only display the sample code in the center of the picture

html中img tag Display imageCenter method currently I know three methods. The editor will share them to the Script House platform below. Friends who need them can refer to the method of displaying the center of the image in the img tag in the

. Currently, I know three methods. I will record them here.

The first one: using css clip:rect(top right bottom left ); Usage needs to be used with position: absolute: as follows

##

<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">

Set the width and height of the image to be equivalent Scale proportionally to the actual width and height of the image, and then use the rect method to set the clipping range of the image.

##- Second: Use img’s background#. ##Attributes:

<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>

Use the background to control the center position of the image display. You need to set the background to scale according to the true width and height of the image. Then offset the movement amount of the background to control the width and height of the picture. What needs to be noted is that the src of the picture cannot be set. When the img tag does not set src, a gray border will appear on the displayed picture, and there is no way to remove it. b
ord

er:0px also has no effect. My previous solution was to put a default fully transparent image in src, which will solve the problem.

The third method: Contain img in p, use p's

overflow: hidden; to control it, it is more flexible to use,

<p 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">
</p>
<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;//跟p高度一致
            img.style.left = &#39;-&#39; + ((100/realHeight)*realWidth-100)/2 + &#39;px&#39;;//设置图片相对自己位置偏移为img标签的宽度-高度的一半
        }else if (realWidth < realHeight){
            img.width =100 ;//跟p高度一致
            img.height = (100/realWidth)*realHeight;//等比缩放高度
            img.style.top = &#39;-&#39; + ((100/realWidth)*realHeight-100)/2 + &#39;px&#39;;//设置图片相对自己位置偏移为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>

above
Comments

It is already very clear, mainly p controls the size, and the img tag adjusts its size according to the size of p, so as to display the middle part of the picture. Personally, I think it is the third way. The method is easier to use.

The above is the detailed content of Three methods in HTML to implement the img tag to only display the sample code in the center of the picture. For more information, please follow other related articles on the PHP Chinese website!