jquery实现图片按比例缩放示例
<html>
<title></title>
<head></head>
<style>
.thumbnail{overflow:hidden;width:400px;height:240px;}
</style>
<scriptsrc="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<scriptlanguage="javascript">
$(function(){
/*图片不完全按比例自动缩小byzwwooooo*/
$('#contentdiv.thumbnailimg').each(function(){
varx=400;//填入目标图片宽度
vary=240;//填入目标图片高度
varw=$(this).width(),h=$(this).height();//获取图片宽度、高度
if(w>x){//图片宽度大于目标宽度时
varw_original=w,h_original=h;
h=h*(x/w);//根据目标宽度按比例算出高度
w=x;//宽度等于预定宽度
if(h<y){//如果按比例缩小后的高度小于预定高度时
w=w_original*(y/h_original);//按目标高度重新计算宽度
h=y;//高度等于预定高度
}
}
$(this).attr({width:w,height:h});
});
});
</script>
<body>
<divid="content">
<divid="thumbnail"class="thumbnail">
<imgid="web"src="./midle.png"/>
</div>
</div>
</body>
</html>热门推荐
10 八一幼儿祝福语大全简短
11 公司乔迁食堂祝福语简短
12 婚礼结束聚餐祝福语简短
13 儿媳买车妈妈祝福语简短
14 毕业送礼老师祝福语简短
15 同事辞职正常祝福语简短
16 恭贺新婚文案祝福语简短
17 金店立秋祝福语简短英文
18 婆婆高寿祝福语大全简短