首页图片标签为什么不能改图片的宽度_动易.NET版本常见问题_产品知识库

首页图片标签为什么不能改图片的宽度

作者：雅虎来源：动易论坛点击数：次发布时间：2008年04月19日

问题：在网站首页模板中，修改“图片更新”处的图片标签：

{PE.Label id="带图片内容列表_图片_普通式" parentid="2" arrnodeid="0" includechild="true" specialid="0" shownum="2" ishot="false" iselite="false" datenum="0" ordertype="1" imgwidth="150" imgheight="150" titlelen="20" contentlen="0" showtips="false" urltype="0" hits="0" elitelevel="1" span="" class="" /}

　　在这里若将图片尺寸imgwidth="" imgheight=""中的“imgwidth=""”（即图片宽度）改成“imgheight="150"”，但是显示出来的图片宽度还是160。若改 imgheight=""的图片高度则可以改，请问什么问题？

解决：这是因为在CSS定义中强制定义了图片的宽度定义。

　　您查看首页的网页源文件，可以看到下述代码：

　　在SkinDefaultdefault.css中，您可以查找“.pe_u_thumb”的CSS定义：

/* --整站普通图片列表标签-- */
/* 定义缩略图外框大小，控制隐藏超出的图片内容 */
.pe_u_thumb, .p_thumb_l_pic
{
    height: 120px;
    overflow: hidden;
    text-align: center;
    border: 1px solid #ccc;
}
/* 定义缩略图宽度，按比例缩放 */
.pe_u_thumb, .pe_u_thumb img
{
    width: 160px;
}

　　这里定义了.pe_u_thumb里面所包含的图片（即.pe_u_thumb img）为宽160px，因此改标签参数是不能实现的。

　　解决方法：可以删除或更改这里的“width: 160px;”定义，直接由标签来控制。

　　注意：上面

的作用是定义缩略图外框大小，控制隐藏超出的图片内容，即不管图片有多高，都会按CSS定义中的比例进行等比绽放显示固定尺寸的。详细请参阅我们提供的PDF“用户手册”中模板方案管理章节中的“特殊CSS定义说明”中的说明。

缩略图按比例缩放的定义：

　　利用对缩略图外框和其包含图片的定义，以实现缩略图按比例缩放。在以下定义中，先定义缩略图外框（pe_u_thumb）的高度为120像素，并定义超出高度即隐藏内容（overflow: hidden;）。再定义缩略图外框和其包含图片（pe_u_thumb img）的宽度为160像素，不定义图片的高度（即以宽度为准按比例缩放）。
/* 定义缩略图外框大小，控制隐藏超出的图片内容 */
.pe_u_thumb, .p_thumb_l_pic
{
height: 120px;
overflow: hidden;
text-align: center;
border: 1px solid #ccc;
}
/* 定义缩略图宽度，按比例缩放 */
.pe_u_thumb, .pe_u_thumb img
{
width: 160px;
}
　　这样，缩略图外框内的图片会以定义宽160 px按比例缩放，如果超过缩略图外框定义的高度，则不显示超出部分的图片。这个方法一是可以统一整体缩略图外框的尺寸，同时缩略图能按比缩放不变形。