js 在指定宽高元素中插入自适应图片_var html = '

作者：我家小花儿 | 2024-02-18 20:52:55

赞

踩

在一个指定宽高的div中根据图片尺寸做相应展示。首先，需要获取图片的真实宽高，其次比较图片宽高和容器宽高，根据不同情形设置图片元素的展示样式。这里分三类：1、如果图片的width和height均小于容器的width和height，那么直接让图片上下左右居中；2、 如果图片的width大于容器的width或height大于容器的height，图片的宽高比大于容器比例，让图片按照宽度等比例缩放，然后垂直居中（容器需line-height）；3、 如果图片的width大于容器的width或height大于容器的height，图片的宽高比小于容器比例，让图片按照高度等比例缩放，然后左右居中（容器需text-align:center;vertical-align:middle）；

css:

.outer{
    margin: auto;
    margin-top: 20px;
    width: 400px;
    height: 300px;
    text-align: center;
    line-height: 300px;
    border: 2px solid bisque;
   }
.img{
    vertical-align: middle;
}

html:

<div style="" class="outer"id="picdiv"></div>
<button id='addImg'>ok</button>

js：IE中如果图片已经缓存过onload可能不触发，因为IE加载缓存快，未运行到onload图片就已经加载好了，所以还需要用complete判断图片是否加载完毕，IE根据这个属性判断图片是否已加载完并显示，值为true表示已显示，此时可以直接获取宽高。注complete和缓存没有关系，即和以前是否加载过该张图片没有关系。

可参考：http://blog.sina.com.cn/s/blog_73c8ed1901013k70.html

var imgLoad = function (url,callback) {
    var img = new Image();
    img.src = url;
    if (img.complete) {
        callback(img.width, img.height);
    } else {
        img.onload = function () {
            callback(img.width, img.height);
            img.onload = null;
        };
    };
};
document.getElementById('addImg').οnclick=function(){
	var url="xxx/xxx.jpg";	
	imgLoad(url,function(width,height){
		var h= height; 
		var w= width;
		var outerw=document.getElementById('picdiv').clientWidth;//scrollWidth
		var outerh=document.getElementById('picdiv').clientHeight;
		var imgNode=document.createElement('img');
		//.appendChild(div);
		var html="";
		if( (w>outerw||h>outerh)&&w/h>=outerw/outerh){
			//920*554 宽高
			//宽比较大 width 100%
			html='<img style="width:100%;" class="img" src="'+url+'">';
		}else if((w>outerw||h>outerh)&&w/h<outerw/outerh){			
			html='<img style="height:100%;" class="img" src="'+url+'">';
		}else {
			html='<img style="" class="img" src="'+url+'">';
		}
		document.getElementById("picdiv").innerHTML = html;
	})	
}

或jquery:

 $("#addImg").on('click',function(){
	var url="xxx/xxx.jpg";
	$("<img/>").attr("src",url).load(function() {
		var h= this.height; 
		var w=  this.width;
		var outerw=$(".outer").width();
		var outerh=$(".outer").height();
		var html="";
		if( (w>outerw||h>outerh)&&w/h>=outerw/outerh){
			//920*554 宽高
			//宽比较大 width 100%
			html='<img style="width:100%;" class="img" src="'+url+'">';
		}else if((w>outerw||h>outerh)&&w/h<outerw/outerh){
			html='<img style="height:100%;" class="img" src="'+url+'">';
		}else {
			html='<img style="" class="img" src="'+url+'">';
		}
		$("#picdiv").html(html);
	});	
})