js+css设置图片进行动态显示调整。

.divImg{

width:233px;
height:214px;
border:1px solid #e5e5e5;
overflow: hidden;
text-align: center;

}

<div class="divImg">

  <img alt="" src="path">

</div>

主要是设置Img标签外层div样式,overflow: hidden;

$("img").load(function(){
 $.each($(".divImg>a>img"),function(){
    drawImage(this,233,214);//动态设置宽高值
 });
});

function drawImage(ImgD, FitWidth, FitHeight) {

var image = new Image();
image.src = ImgD.src;
if (image.width > 0 && image.height > 0){
var width = image.width;
var height = image.height;
if(width > FitWidth){
if(width>height){
$(ImgD).css("height","100%");
}
else if(width<height){
$(ImgD).css("width","100%");
}else{

//相等(正方形)
$(ImgD).css("width","100%");
$(ImgD).css("height","100%");
}

}

}}

 超宽:

 原图:

超高:

原图:

注意:我这里系统的图片宽度永远大于我设定的值,所以只判断了宽,高度判断可以增加

posted @ 2015-06-02 11:02  zhanghengc  阅读(1173)  评论(0编辑  收藏  举报