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方法來設定圖片的剪切範圍。 ##屬性
:<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時候,顯示的圖片會出現一條灰色的邊框,而且沒有辦法去掉,bord er:0px也沒作用,我之前的解決方法是放一張預設的全透明的圖片在src中,就可以解決了。在p中包含img,用p的
: hidden;來控制,用起來比較靈活,
<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 = '-' + ((100/realHeight)*realWidth-100)/2 + 'px';//设置图片相对自己位置偏移为img标签的宽度-高度的一半 }else if (realWidth < realHeight){ img.width =100 ;//跟p高度一致 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>上面
註解已經很清楚了,主要是p控制了大小,img標籤根據p的大小來調節自身的大小。方法比較好用。
以上是HTML中三種方法實作img標籤只顯示圖片中心位置的範例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!