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;
}
上面注释已经很清楚了,主要是div控制了大小,img标签根据div的大小来调节自身的大小。在进行偏移,从而达到显示图片中间部分的图片。个人觉得第三种方法比较好用。
以上所述是小编给大家介绍的HTML中img标签只显示图片中心位置的方法(三种方法),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉
本文系统来源:php中文网