关于alluse的"有效控制文章内容里的图片的尺寸"一文的纠正-领先建站CMS提供服务商我们专注于CMS建站产品的研发

1830 查看	3 回复

主题：[分享]关于alluse的"有效控制文章内容里的图片的尺寸"一文的纠正 [收藏主题]

转到：

天外飞仙当前离线

222 主题	0 广播	0 粉丝

级别:二年级

用户积分:1359 分
登录次数:245 次
注册时间:2006/11/6
最后登录:2014/11/7

天外飞仙发表于：2007/2/16 1:12:00 | 只看该作者查看该作者主题楼主

有生源找课程就上科汛课堂街!

alluse 版主的原文如下:

以下是引用alluse在2006-12-2 16:52:27的发言：

在网上也有这样的js，但我觉得最简单的方法还是采用css。具体设置如下：

例如:

<div class="news_content" id="content">{LB_新闻内容}</div>

这里的class是控制她的样式，id是为了这个css能有效的获取她的值

那么请定义如下样式：

<style>

.news_content{ width:550px;}

.news_content img{ max-width:530px; border:1px #666 solid;width:expression(document.body.clientWidth>document.getElementById("content").scrollWidth*9/10? "530px": "auto" );}

</style>

这样在news_content层内的图片的最大宽度限制在了530px以内，

同理，所有有图片显示的地方都可以这样定义图片的显示尺寸。

按照上面的说法,当图片的宽度大于530px时，news_content层内的图片的最大宽度确实限制在了530px以内．但是当图片的宽度小于530px时，news_content层内的图片的宽度被强制拉伸为530px，使图片失真．把代码：

.news_content img{ max-width:530px; border:1px #666 solid;width:expression(document.body.clientWidth>document.getElementById("content").scrollWidth*9/10? "530px": "auto" );}

改为：

.news_content img{ max-width:530px; border:1px #666 solid;width:expression(document.body.clientWidth>document.getElementById("content").scrollWidth*9/10? "auto": "530px" );}

后（注意"530px": "auto"
和"auto": "530px"）宽度超过530px被限制在530px内，小于530px的将不变．

还有一点，在网上看到有人说上面的写法只支持IE的浏览器，但我在火狐下一样支持．
还有就是使用ＪＳ也可以实现此效果，但如果是采集来的图片使用ＪＳ就不管用了．然而用上面的方法即使是采集来的图片也能被很好的控制．

[此贴子已经被作者于2007-2-16 2:37:31编辑过]

做新职业技能培训平台就选#科汛网校