想控制图片大小,比如大于500px就显示500px,小于500px,就显示本身大小.
但现在出现问题。问题一:
CSS控制时有些图片可以控制,有些图片不能控制。。经自己找原因,可能是因为不能控制图片中包含中文的问题。想问下各位还有什么比较好的控制图片大小的方法?(js也不行)
问题二:
图片名包含中文时,另存时会另存为bmp,(不是IE缓存的问题),有办法解决没有?
做过的大虾指教一下,也可以用带中文名的图片试下~==============================
CSS控制:
.imagery{
border:0;
margin:0;
padding:0;
max-width:200px;
width:expression(this.width>200?"200px":this.width+"px");
max-height:250px;
height:expression(this.height>250?"250px":this.height+"px");
overflow:hidden;
}
但现在出现问题。问题一:
CSS控制时有些图片可以控制,有些图片不能控制。。经自己找原因,可能是因为不能控制图片中包含中文的问题。想问下各位还有什么比较好的控制图片大小的方法?(js也不行)
问题二:
图片名包含中文时,另存时会另存为bmp,(不是IE缓存的问题),有办法解决没有?
做过的大虾指教一下,也可以用带中文名的图片试下~==============================
CSS控制:
.imagery{
border:0;
margin:0;
padding:0;
max-width:200px;
width:expression(this.width>200?"200px":this.width+"px");
max-height:250px;
height:expression(this.height>250?"250px":this.height+"px");
overflow:hidden;
}
<script language="javascript" type="text/javascript" src="js/jquery-1.2.3.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
var el = $("#col > img");
el.css({width: 90, height: 90});
el.mouseover(function(){
$(this).css({opacity:"1"}).stop().animate({opacity:".4"},300);
});
el.mouseout(function(){
$(this).css({opacity:".4"}).stop().animate({opacity:"1"},300);
});
el.click(function(){
var url = $(this).attr("title");
view(url);
});
});
var view = function(url){
var $_ = $(this),$img = $('img', $_),$el = $("#img1"),$load = $("#load");
var $w, $h, wContainer, hContainer;
wContainer = 400;//缩放宽度设置为500
hContainer = 500;//缩放高度设置为400
$load.css({opacity:"1",top:300,left:300,position:'absolute'}).show(); //load图片
$el.attr({src:url}).css({top:300,left:300,position:'absolute'}).hide();//img
$img = new Image();
$img.onload = function(){//创建image对象 添加onload方法
$img.onload = null;
$w = $img.width;//获取图片宽度
$h = $img.height;//获取图片高度
if ($w > wContainer) {//如果图片宽度大于 缩放宽度
$h = $h * (wContainer / $w);
$w = wContainer;
if ($h > wContainer) {
$w = $w * (hContainer / $h);
$h = hContainer;
}
} else if ($h > hContainer) { //如果图片高度大于 缩放高度
$w = $w * (hContainer / $h);
$h = hContainer;
if ($w > wContainer) {
$h = $h * (wContainer / $w);
$w = wContainer;
}
}
$el.css({width:$w,height:$h, marginLeft:(wContainer-$w)*.5,marginTop:(hContainer-$h)*.5}) //img样式--缩放后的高度,缩放后的宽度
$load.fadeOut('fast',function(){$el.fadeIn();});//load隐藏,img显示
};
$img.src = url;
};
</script>