请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

Wordpress图片撑破页面解决办法

来源: cfpl 2021-11-2 07:39:15 显示全部楼层 |阅读模式
如果Blog的文章正文部分宽度只有450px,文章里加了一幅宽度超过450px的图片,无论是IE还是Firefox/Opera下都会出现撑破页面的情况。怎么办呢?下面给出两种解决方案备选。

1. 通过定义CSS解决。示例:定义一个如下img属性

#xxxx .xxxxx img {
max-width: 450px;
width: expression(this.width > 450 ? “450px” : this.width);
}

max-width: 450px: 代码中的这个部分针对Firefox/Opera浏览器,限制对象的最大宽度为450px。
此代码对IE无用,为了让IE也能限制对象宽度,所以在代码中加入第2行命令,用IE提供的expression命令,使所有图片的宽度自动缩小或放大至450px:
width: expression(this.width > 450 ? “450px” : this.width);

这种方法简单易行,一劳永逸,但是IE浏览器中,所有宽度不足450px的图片也会被放大失真。

2. 在插入图片的时候定义图片宽度。
如果想要完美解决这个问题,还有个笨办法,就是针对每张宽度大于450px的图片,都在插入图片时定义其宽度为450px。例如:



这样,该图片的宽度就会被缩小至450px了。

第二种方法比较自由,可以根据需要进行调整;缺点就是需要记忆width属性。
免责声明:本文由作者自由发布,不代表豆瓜网(211w.com) 观点和立场。
回复

使用道具 举报

大神点评8

cfpl 2021-11-2 07:48:07 显示全部楼层
上面的第二种方法,例如:由于图片显示不了,给您造成不便,请原谅!谢谢
回复

使用道具 举报

ahbaybface 2021-11-2 07:57:28 显示全部楼层
有些的确存在这样的情况.很不错的帖子
回复

使用道具 举报

月飞春秋 2021-11-2 08:07:44 显示全部楼层
这句表达式width: expression(this.width > 450 ? “450px” : this.width);
不错
回复

使用道具 举报

山河 2021-11-2 08:15:51 显示全部楼层
学习了。这句代码很实用 不单单可以使用在wordpress
回复

使用道具 举报

ahbaybface 2021-11-2 08:23:28 显示全部楼层
三元操作符!!!!
回复

使用道具 举报

月飞春秋 2021-11-2 08:32:01 显示全部楼层
使用三元操作符
这种想法很值得提倡
回复

使用道具 举报

bingu 2021-11-2 08:33:38 显示全部楼层
hack。。。。。。
回复

使用道具 举报

莫老头 2021-11-2 08:46:34 显示全部楼层
hack。。。。。。
回复

使用道具 举报

返回列表 发表文章

豆瓜网微信二维码

豆瓜微信公众号

专注科技资讯市场探索、未来发展趋势等。扫一扫立即关注。

曾光红

曾光红

豆瓜网主编:曾光红,扫描加微信好友

您需要登录后才可以回帖 登录 | 立即注册

相关推荐

腾讯投资字节跳动关联公司三发餐饮 持股12%

腾讯投资字节跳动关联公司三发餐饮 持股12%

1月24日消息,天眼查信息显示,1月21日,湖南三发餐饮管理有限公司发生工商变更,新增

36Kr专访:万亿私域生意,好家云店的下半场刚刚开始

36Kr专访:万亿私域生意,好家云店的下半场刚刚开始

鏈鎺璧峰叏骞存渶鍚庝竴娉㈠ぇ淇冪儹娼殑鍙屽崄浜岋紝闈欐倓鎮勫湴杩囧幓浜嗐 鐢靛晢

京东健康年货节 地道年味健康好礼低至5折

京东健康年货节 地道年味健康好礼低至5折

春节的脚步已越来越近,家家户户无不忙着准备年货。日前,有位山东小伙为父亲送上了特

京东超体人气火爆!明星赵文卓到店与重庆消费者欢乐迎新年

京东超体人气火爆!明星赵文卓到店与重庆消费者欢乐迎新年

探寻新年味,玩出新花样!春节正式进入倒计时,京东MALL、京东电器超级体验店(简称“

从千亿赛道到禁止广告,槟榔行业如何站在消费者角度变革创新?

从千亿赛道到禁止广告,槟榔行业如何站在消费者角度变革创新?

湖南省市场监督管理局也明确从2022年2月1日起不再对槟榔实行食品生产许可审批,槟榔行

关注0

粉丝1

文章2

MORE+
  • 日排行
  • 周排行
  • 月排行
商业洽谈 文章投递 寻求报道
QQ咨询: QQ:199993150
关注微信