在一个指定宽高的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);
});
})