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

标签：

.divImg{

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

}

<div class="divImg">

  <img 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%");
}

}

}}

 超宽：

 原图：

超高：

原图：

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

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

标签：

原文地址：http://www.cnblogs.com/jimmyhen/p/4545866.html