打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
修改主题CSS来让WordPress文章中图片宽度自适应,避免撑破页面

【天下淘商-淘宝卖家和淘宝客的学习平台 - http://blog.52bxzyw.com

前言
之前在文章中插入图片时,由于主题设置的文章宽度只有600px,所以当图片宽度超过600px时,图片的右边就会被裁掉一截不显示。为了让图片完整显示,我之前采取的办法是在插入图片时编辑图片的宽度,将width设置为一个合适的值。但是当要插入的图片很多时,修改起来费时费力,而且之前发布的文章也要翻出来修改。要是更换了主题,宽度变了又得改一次,实在是太麻烦。

后来搜了一下,发现直接修改css是个很简便的方法(其实官方的模版都有这个功能).

代码及修改方法
编辑主题的style.css,在img样式定义中加上下列代码:

padding: 0;max-width: 580px; width: expression(this.width > 580 ? "580px": (this.width+"px"));height:auto; 

就可以将图片的最大宽度设置为580px了。

有些主题没有直接定义img样式,可能会有.post img{}之类的样式,这时也加在里面就ok了。如图,我的博客主题修改的是.context p img{}:

还有一些主题的style.css中找不到img{}等样式定义,那就就直接加上一段吧:

p img {padding: 0;max-width: 580px; width: expression(this.width > 580 ? "580px": (this.width+"px"));height:auto; }

效果对比

修改前:

修改后:

jQuery方法实现
方法来自http://zww.me/archives/25438
兼容IE6,图片右上角有个放大镜标识。

jQuery(window).load(function(){/* jQuery方法实现自动缩放图片 beta2 by zwwooooo */var img_cont=($('.post').find('img')).length; //查找并计算文章里面的图片个数,根据自己主题写选择器if (img_cont != 0) { //做个判断,没有图片就不需要了var maxwidth=600; //定义图片最大宽度,超过此宽度的图片自动缩为 maxwidth 值var maxwidth_value=maxwidth+'px';for (var i=0;i<=img_cont-1;i++) {var max_width=$('.post img:eq('+i+')');if (max_width.width() > maxwidth) {max_width.addClass('max_width_img').removeAttr("width").removeAttr("height").css({"cursor":"pointer","width":maxwidth_value,"height":"auto"});}}}});
喜欢 2评论 2分享






http://www.11512.com/306.html


本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
代码学习群简易教程(5)
自学代码教程☆图片标签
CSS控制图片大小
div css float浮动用法(left right)
带你入门HTML CSS网页设计,编写网页代码的思路
前端面试题之CSS
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服