资源描述
如何限制一篇文章中的图片的大小
由于有时候文章中会出现图片,例如文章的宽度为800PX,但是文章中的图片大小为1200PX,这样如果控制了文章盒子的DIV的overflow为hidden的话,图片就不能够完整显示,但是如果不控制大小的话,图片又会撑破DIV盒子,请问如何解决?最好的比较完美的!
PS:由于并不是每一篇文章都有<img />,我的意思就是说只要文章中出现了图片,如果图片的大小超过指定宽度,那么就缩放到指定宽度。
<style type="text/css">
<!--
img,a img{
border:0;
margin:0;
padding:0;
max-width:650px;
width: expression(this.width > 650 && this.width > this.height ? 650px : 'auto';);
max-height:1650px;
height: expresion(this.height > 1650 ? 1650px : 'auto';);
} -->
</style>
把系统自带的那个缩放JS换成这个真正的缩放图片代码
<script language="JavaScript">
<!--
//图片等比例缩放
var FitWidth = 350; //图片宽度
var FitHeight = 276; //图片高度
function ResizePic(ImgTag)
{
var image = new Image();
image.src = ImgTag.src;
if(image.width>0 && image.height>0){
if(image.width/image.height >= FitWidth/FitHeight){
if(image.width > FitWidth){
ImgTag.width = FitWidth;
ImgTag.height = (image.height*FitWidth)/image.width;
}
else{
ImgTag.width = image.width;
ImgTag.height = image.height;
}
}
else{
if(image.height > FitHeight){
ImgTag.height = FitHeight;
ImgTag.width = (image.width*FitHeight)/image.height;
}
else{
ImgTag.width = image.width;
ImgTag.height = image.height;
}
}
}
}
-->
</script>
图片加载这个<IMG border=0 src="/Article/UploadFiles/201102/2011022614204287.jpg" onload=javascript:ResizePic(this)>就OK啦
效果预览地址
( 以下链接页面已失效 可用百度搜索 “解决文章图片撑破表格的办法” “用JS控制页面图的图片大小的通用代码”)
请查看这个用JS控制页面图的图片大小的通用代码
http://www.msgz.org/wsjy/wmzl/wlzs/201012/74280.html
上面这个主要是用于图片不大于网页的。那么下面这个就是专门控制图片大于网页的。代码直接放入网页</body></html>之前即可。非常好。
解决文章图片撑破表格的办法(直接控制图片显示大小)
http://www.msgz.org/wsjy/wmzl/wlzs/200801/62078.html
[本帖最后由 xjbtsx 于 2011-03-06 19:14:11 编辑]
展开阅读全文