그림 중앙에만 샘플 코드를 표시하도록 img 태그를 구현하는 HTML의 세 가지 방법

img 태그 의 html은 현재 그림

센터 메소드를 표시합니다. 세 가지 방법을 알고 있는데, 아래 스크립트 하우스 플랫폼에서 공유해 드릴게요.

HTML에서 이미지 센터를 표시하는 방법은 세 가지가 있습니다.

첫 번째 유형: CSS clip:direct(top right 사용 하단 왼쪽 ); 사용법은 위치와 함께 사용해야 합니다. 절대: 다음과 같습니다

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

이미지의 너비와 높이를 동일하게 설정합니다. 이미지의 실제 너비와 높이에 비례하여 크기를 조정한 다음 ret 메서드를 사용하여 이미지의 클리핑 범위를 설정합니다. 🎜>속성

:

<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를 설정하지 않으면 회색 테두리가 나타납니다. 표시된 사진에는 제거할 수 있는 방법이 없습니다. b ord

er:0px도 효과가 없습니다. 이전 해결 방법은 src에 기본 완전 투명 이미지를 넣어 문제를 해결하는 것이었습니다. : p에 img를 포함하고, p의

overflow
를 사용하세요. 숨겨진; 제어하려면 더 유연하게 사용하세요.

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

위의 코멘트 에서 가장 중요한 점은 p가 크기를 제어하므로 이미지의 중간 부분이 표시된다는 점입니다. 세 번째 방법이 사용하기 더 쉬운 것 같아요.

위 내용은 그림 중앙에만 샘플 코드를 표시하도록 img 태그를 구현하는 HTML의 세 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!