Javascript+CSS控制日志图片大小

知更鸟
知更鸟
知更鸟
1518
文章
6913
评论
更多
 2013年1月28日23:59:50 28 3.5K

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

以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　改为所用主题选择器。

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

历史上的今天
一月
28
weinxin
关于本站
分享交流WordPress经验与技巧，关注前端设计与网站制作。仅用于功能演示。
获取本主题
售前咨询加Q：598845006
多功能主题 Begin
js实时获取浏览器窗口大小 Web前端

js实时获取浏览器窗口大小

js实时获取浏览器窗口大小，我们可以使用addEventListener()方法来实现。该addEventListener()方法可以注册事件处理程序以侦听浏览器窗口resize事件，例如window...
01月12日 1.7K 1
WordPress 3D旋转标签云 WordPress

WordPress 3D旋转标签云

这个3D标签云可不是N年前的那个Flash版的 wp-cumulus， 这个3D旋转标签云完全使用JS代码编写，很小只有几K，不用担心像垃圾Flash对资源的耗费。 具体效果看本文的侧边栏标签云。 下...
08月30日 14.5K 53
获取本主题
售前咨询加Q：598845006
多功能主题 Begin
匿名

发表评论

匿名网友 填写信息

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

评论：28   其中：访客  24   博主  4
    • 张磊先生 张磊先生 4
      2013年1月29日 11点31分 1F
      回复

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

      • 萨龙龙 萨龙龙 4
        2013年1月29日 13点51分 2F
        回复

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

        • 清新物语 清新物语 4
          2013年1月29日 17点09分 3F
          回复

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

          • 凌晨疯子 凌晨疯子 2
            2013年1月29日 17点44分 4F
            回复

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

            • 第九技术 第九技术 1
              2013年1月30日 11点15分 5F
              回复

              不错，很详细。

              • 奇迹私服 奇迹私服 2
                2013年1月30日 23点40分 6F
                回复

                这是缩略的吧

                • 车来车往 车来车往 2
                  2013年2月1日 08点17分 7F
                  回复

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

                  • 魔域sf 魔域sf 2
                    2013年2月2日 13点22分 8F
                    回复

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

                    • 小谭 小谭 1
                      2013年2月2日 20点16分 9F
                      回复

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

                        • 知更鸟 知更鸟
                          2013年2月2日 22点41分 1B
                          回复

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

                        • 唐浩宾博客 唐浩宾博客 0
                          2013年2月4日 17点25分 10F
                          回复

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

                          • 优卓市场 优卓市场 0
                            2013年2月5日 20点42分 11F
                            回复

                            不错的方法，收藏了

                            • 电脑天空 电脑天空 5
                              2013年2月11日 23点11分 12F
                              回复

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

                              • lwxining lwxining 1
                                2013年2月13日 20点33分 13F
                                回复

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

                                • 免费php资源 免费php资源 2
                                  2013年2月20日 17点04分 14F
                                  回复

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

                                  • 免费php资源 免费php资源 2
                                    2013年2月20日 17点54分 15F
                                    回复

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

                                    • root root 0
                                      2013年3月3日 16点58分 16F
                                      回复

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

                                        • 牛德雷 牛德雷 3
                                          2013年5月22日 23点08分 1B
                                          回复

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

                                        • 幸福守候 幸福守候 0
                                          2013年3月4日 22点31分 17F
                                          回复

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

                                          • SEO爱好者 SEO爱好者 1
                                            2013年4月12日 17点35分 18F
                                            回复

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

                                            • 蚂蚁 蚂蚁 1
                                              2013年11月11日 02点36分 19F
                                              回复

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

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

                                              不过js还是收藏了

                                              • ilunpo ilunpo 2
                                                2014年4月2日 18点33分 20F
                                                回复

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

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

                                                  • 知更鸟 知更鸟
                                                    2014年4月3日 09点03分 1B
                                                    回复

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

                                                      • ilunpo ilunpo 2
                                                        2014年4月3日 09点12分 2B
                                                        回复

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

                                                        • ilunpo ilunpo 2
                                                          2014年4月3日 09点13分 2B
                                                          回复

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