Javascript+CSS控制日志图片大小

网上的方法很多,但都有局限性,本文提供的方法基本兼容主流浏览器。

HotNews主题为例。打开HotNews主题HotNewspro\js目录的custom.js把下面代码加到最后:

  1. // 控制图片大小
  2. $(document).ready(function() {
  3.     var maxwidth=580;
  4.     $(".entry p img").each(function(){
  5.         if (this.width > maxwidth)
  6.          this.width = maxwidth;
  7.     });
  8. });

再打开主题样式文件style在最后添加:

  1. .entry p img{
  2.     height: auto;
  3. }

 

也可单独使用Javascript或者CSS控制图片大小,不过兼容性较差

javascrip:

  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3.     var maxwidth=580;
  4.     var maxheight=450
  5.     $(".entry p img").each(function(){
  6.         if (this.width > maxwidth)
  7.          this.width = maxwidth;
  8.         if (this.height > maxheight)
  9.          this.height = maxheight;
  10.     });
  11. });
  12. </script>

CSS:

  1. .entry p img{
  2.     max-width: 90%;
  3.     height: auto;
  4. }

其它主题可以将上述代码中的 .entry 为所用主题选择器。

编辑文章时手动将插入的图片拖小,个人认为一劳永逸。

weinxin
我的微信
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
Begin主题购买
Begin主题购买

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:28   其中:访客  24   博主  4

    • avatar 张磊先生 来自天朝的朋友 Internet Explorer Windows XP 江苏省南通市 电信 4

      艾玛!抢到了沙发!支持博主!

      • avatar 萨龙龙 来自天朝的朋友 Opera浏览器 Windows 7 浙江省杭州市 铁通 4

        难怪我的网站图片在IE下有点拉伸,之前把第一段代码中的宽度写在CSS中,兼容性差了很多。

        • avatar 清新物语 来自天朝的朋友 谷歌浏览器 Windows XP 福建省福州市 电信 4

          谢谢鸟哥,这么快回答我的疑问

          • avatar 凌晨疯子 来自天朝的朋友 谷歌浏览器 Windows 7 湖南省长沙市 联通 2

            鸟哥,怎么样才能把CMS的首页幻灯栏做成你这样的呢?就是幻灯图+热点推荐+滚动标题的三格式。

            • avatar 第九技术 来自天朝的朋友 Internet Explorer Windows 7 广西柳州市柳南区 电信 1

              不错,很详细。

              • avatar 奇迹私服 来自天朝的朋友 谷歌浏览器 Windows 7 北京市朝阳区 联通 2

                这是缩略的吧

                • avatar 车来车往 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信 2

                  找不到图片模板 和首页模板 在哪里有下载

                  • avatar 魔域sf 来自天朝的朋友 谷歌浏览器 Windows 7 北京市 联通 2

                    这个是缩略图吧,不知道效果怎么样啊

                    • avatar 小谭 来自天朝的朋友 谷歌浏览器 Windows 7 浙江省宁波市 电信 1

                      图片在这里可以看到http://faq.wopus.org/question/19810/

                        • avatar 知更鸟 Admin 来自天朝的朋友 火狐浏览器 Windows XP 辽宁省沈阳市 铁通

                          @小谭 对喜欢折腾版权链接的,俺懒得说什么了

                        • avatar 唐浩宾博客 来自天朝的朋友 搜狗浏览器 Windows XP 广东省中山市 电信 0

                          正打算用鸟哥的主题做站呢!~!~支持一个!~

                          • avatar 优卓市场 来自天朝的朋友 Internet Explorer Windows 7 湖北省黄冈市 电信 0

                            不错的方法,收藏了

                            • avatar 电脑天空 来自天朝的朋友 Internet Explorer Windows 7 云南省玉溪市 电信 5

                              鸟哥,请问 怎么 增加百度搜索,谷歌的不给力啊,WP自带的搜索也不准确,谢谢了。

                              • avatar lwxining 来自天朝的朋友 谷歌浏览器 Windows XP 山东省莱芜市 联通 1

                                问一个问题哈为什么我用你的主题后,打开公告提示多重重定向是怎么回事啊?cpanel面板

                                • avatar 免费php资源 来自天朝的朋友 谷歌浏览器 Windows XP 北京市 联通 2

                                  鸟哥的空间 终于可以访问了 很是开心啊 祝贺

                                  • avatar 免费php资源 来自天朝的朋友 谷歌浏览器 Windows XP 北京市 联通 2

                                    为什么我用的hotnews2.7主体 打开网站的时候 总要闪烁一下

                                    • avatar root 来自天朝的朋友 谷歌浏览器 Windows 7 北京市 电信通 0

                                      为什么我用的hotnews2.7主体 打开网站的时候 总要闪烁一下

                                        • avatar 牛德雷 来自天朝的朋友 谷歌浏览器 Windows 7 河北省邯郸市 联通 3

                                          @root 我的网站也是这个问题,同求解决办法

                                        • avatar 幸福守候 来自天朝的朋友 Internet Explorer Windows 7 浙江省杭州市 电信 0

                                          图片如果加入“说明”,效果就会消失。此外这个主题的文章中如果插入图片时填写“说明”的话,图片下面的说明文字不会居中,有时间帮忙看看这个可以解决吗?最好在填写图片说明的时候文字居中,并且可以自动显示设置好的宽度。

                                            • avatar 知更鸟 Admin 来自天朝的朋友 火狐浏览器 Windows XP 辽宁省沈阳市 铁通

                                              @幸福守候 http://zmingcx.com/hotnews-pro-2-7-1-plus-faq.html
                                              21条

                                            • avatar SEO爱好者 来自天朝的朋友 Internet Explorer Windows 7 福建省泉州市 华侨大学 1

                                              果然效果不错!博主辛苦了!

                                              • avatar 蚂蚁 来自天朝的朋友 谷歌浏览器 Windows 7 河南省新乡市 电信 1

                                                .entry img {
                                                max-width: 650px;
                                                _width: expression(this.width > 650 ? ‘650px’ : true);

                                                不设置高度的情况下
                                                max-widht谷歌火狐支持还是比较好的
                                                IE 用下面表达式也能救救急。
                                                直接加表达式改CSS 反正博客不用考虑太多性能~

                                                不过js还是收藏了

                                                • avatar ilunpo 来自天朝的朋友 谷歌浏览器 Windows 8 黑龙江省哈尔滨市 联通 2

                                                  鸟哥,hotnews主题文章编辑器有问题:插入图片后,输入光标无法调位置/

                                                  输入文本无法从图片下面写起。
                                                  复制进入的文本显示在图片之上。。。只能用文本输入。可是又不直观。如何解决

                                                    • avatar 知更鸟 Admin 来自天朝的朋友 火狐浏览器 Windows XP 辽宁省沈阳市 联通

                                                      @ilunpo 你能确定是hotnews主题文章编辑器有问题,还是Wordpress文章编辑器有问题
                                                      还是自己基本编辑操作还没弄明白

                                                        • avatar ilunpo 来自天朝的朋友 Safari浏览器  Android 2.3.7 ZTE-T U880 Build/GWK74 天津市 电信IDC机房 2

                                                          @知更鸟 是我不太习惯worldpress。不好意思。
                                                          慢慢学习。

                                                          • avatar ilunpo 来自天朝的朋友 Safari浏览器  Android 2.3.7 ZTE-T U880 Build/GWK74 天津市 电信IDC机房 2

                                                            @知更鸟 是我不太习惯wordpress。不好意思。
                                                            慢慢学习。