您现在的位置:小学生自学网>> 信息>> 学习电脑

动易内容页图片撑破表格解决办法

作者: 来源: 发布时间:2012年08月09日 点击数:
 

采集到本地的图片太大把网站都涨变形了解决办法把一下代码放到页面的结尾部分,设置好图片的限制高度和宽度,图片大小就能控制了。
方法一:
<script language="JavaScript">
var imgObj;
for(i = 0; i < document.all.length; i++)
{
if(document.all(i).tagName.toLowerCase()=="img")
{
imgObj = document.all(i) //建议只判断高度或者宽度其中一个,那样可以自动按比例缩放
if (imgObj.height>500) //判断图片的高度,如果大于500,则设置为200,值可以自己修改
{
imgObj.height=200
}
if (imgObj.width>500) //判断图片的宽度,如果大于500,则设置为200,值可以自己修改
{
imgObj.width=200
}
}
}
</script>
方法二:
<script language=JavaScript>
//改变图片大小
function resizepic(thispic)
{
if(thispic.width>700){thispic.height=thispic.height*700/thispic.width;thispic.width=700;} //判断图片的宽度,如果大于700,则设置为700,值可以自己修改
}

问题:图片中心的图片内容页中,图片太大把网页撑破了怎么办呢

回答:
方法一.修改内容页模板中的{$ViewPhoto( )}中的参数来控制

方法二.修改风格 CSS: img {max-width:100%}

方法三.修改图片内容页模板找到: <tr> <td class=left_tdbgall vAlign=center align=middle 代码
在{$ViewPhoto}所在表格中添加style=\"table-layout:fixed;word-break:break-all\"
<tr>
<td class=left_tdbgall vAlign=center align=middle style=\"table-layout:fixed;word-break:break-all\">{$ViewPhoto(400)}</td>
</tr>
fixed :  固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关。也就是说,内容可能被裁切
您的内容页模板就会自动使用表格而不被撑破了。

方法四.用DIV方法,只指定宽度值。代码:<div style=\"width:200px; overflow:hidden;\">{$ViewPhoto}</div>
WIDTH: 200px可以按自已需要修改

上面几种方法在动易中,都不起作用,下面这种方法经测试可以

在你的CSS里面加入下面这段代码就可以实现了

body img{
vertical-align: middle;
max-width: 500px;
    width: expression(this.width >500 && this.height < this.width ? 500: true);
}

其中的500,你可以设置你想要的大小!

 

 

完美CSS控制图片大小

CSS代码如下:

img {
max-width:500px; /* 最大宽度为500px*/
width:600px; /* 图片的大小为500px*/
width:expression(width>550?"550px":width "px");max-width: 550px; /* 假如图片的尺寸超过550象素,那么就按550象素显示,高度同比例变化;假如图片的尺寸小于550象素,那么就原尺寸显示。在IE6中有效*/
overflow:hidden; /* 超出的部分隐藏,避免控制图片大小失败而引起的撑开变形*/
}

 

注意上面的CSS代码要放在风格文件的文章显示控制一块中