RT,图片是用HTML编辑器上传到数据库的,提取出的时候,直接将<img src="图片">这个代码提取出来,这种情况怎么控制图片的大小,使图片不会超过表格大小,缩放时也不能变形。
jsçåcssçèªå¨ææ¯ä¾è°æ´å¾ç大å°æ¹æ³ï¼åå«å¦ä¸ï¼
<title>javascriptå¾ç大å°å¤çå½æ°</title><script language=Javascript>
var proMaxHeight = 150;
var proMaxWidth = 110;
function proDownImage(ImgD){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
var rate = (proMaxWidth/image.width < proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height;
if(rate <= 1){
ImgD.width = image.width*rate;
ImgD.height =image.height*rate;
}
else {
ImgD.width = image.width;
ImgD.height =image.height;
}
}
}
</script>
</head>
<body>
<img src="999.jpg" border=0 width="150" height="110" onload=proDownImage(this); />
<img src="room.jpg" border=0 width="150" height="110" onload=proDownImage(this); />
</body>
纯cssçé²æ¢å¾çæç ´é¡µé¢ç代ç ï¼å¾çä¼èªå¨ææ¯ä¾ç¼©å°ï¼
<style type="text/css">.content-width {MARGIN: auto;WIDTH: 600px;}
.content-width img{MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width > 600 ? "600px" : this.width)!important;}
</style>
<div class="content-width">
<p><img src="/down/js/images/12567247980.jpg"/></p>
<p><img src="/down/js/images/12567247981.jpg"/></p>
</div>
温馨提示:答案为网友推荐,仅供参考
第1个回答 推荐于2016-06-15
这个使用CSS可以控制,一般看你的图片是哪种比例的,如果不想图片变形的话,只设置宽或者高,如:
img{ width:50px;} 或者 img{height:50px;}
这样的结果是,图片本身的大小并没有改变,但这个img标签显示出来的图片是被压缩显示的。
利用JS来调整的原理是:获得图片的宽和高,然后去与父容器的宽高相比,取比例大的来父容器值对img进行样式设置,比如:图片宽/父容器宽 = 3, 图片高/父容器高 = 2,那么取父容器的宽,把这个值通过JS设置给img标签。本回答被提问者采纳
img{ width:50px;} 或者 img{height:50px;}
这样的结果是,图片本身的大小并没有改变,但这个img标签显示出来的图片是被压缩显示的。
利用JS来调整的原理是:获得图片的宽和高,然后去与父容器的宽高相比,取比例大的来父容器值对img进行样式设置,比如:图片宽/父容器宽 = 3, 图片高/父容器高 = 2,那么取父容器的宽,把这个值通过JS设置给img标签。本回答被提问者采纳
第2个回答 2011-08-04
2楼的能够解决CSS控制图片尺寸的问题,但是还不够灵活,我在他的基础上补充一下,
可以这样,如果你的图片的最大宽度不能超过600
只要在CSS里面加句就可以
#content img{max-width:600px;}
可以这样,如果你的图片的最大宽度不能超过600
只要在CSS里面加句就可以
#content img{max-width:600px;}