Javascript+CSS控制日志图片大小

知更鸟
知更鸟
站长
2332
文章
0
粉丝
HotNews主题283,569阅读模式

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

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

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

本站文章大部分为原创，用于个人学习记录，可能对您有所帮助，仅供参考！

js实时获取浏览器窗口大小
js实时获取浏览器窗口大小
复制网页内容自动添加版权信息
复制网页内容自动添加版权信息
10款支持全屏展示的jQuery插件
WordPress 3D旋转标签云
WordPress 3D旋转标签云
weinxin
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接，谢谢合作！
获取本主题
598845006
咨询主题请加Q：598845006
多功能主题 Begin
 
知更鸟
  • Javascript
  • HotNews主题
获取本主题
598845006
咨询主题请加Q：598845006
多功能主题 Begin
评论  28  访客  24  作者  4
    • 张磊先生
      张磊先生 4
      江苏省南通市 1F
      回复

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

      • 萨龙龙
        萨龙龙 4
        浙江省杭州市 2F
        回复

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

        • 清新物语
          清新物语 4
          福建省福州市 3F
          回复

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

          • 凌晨疯子
            凌晨疯子 2
            湖南省长沙市 4F
            回复

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

            • 第九技术
              第九技术 1
              广西柳州市柳南区 5F
              回复

              不错，很详细。

              • 奇迹私服
                奇迹私服 2
                北京市朝阳区 6F
                回复

                这是缩略的吧

                • 车来车往
                  车来车往 2
                  广东省深圳市 7F
                  回复

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

                  • 魔域sf
                    魔域sf 2
                    北京市 8F
                    回复

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

                    • 小谭
                      小谭 1
                      浙江省宁波市 9F
                      回复

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

                        • 知更鸟
                          知更鸟
                          中国 B1
                          回复

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

                        • 唐浩宾博客
                          唐浩宾博客 0
                          广东省中山市 10F
                          回复

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

                          • 优卓市场
                            优卓市场 0
                            湖北省黄冈市 11F
                            回复

                            不错的方法，收藏了

                            • 电脑天空
                              电脑天空 5
                              云南省大理州 12F
                              回复

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

                              • lwxining
                                lwxining 1
                                山东省莱芜市 13F
                                回复

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

                                • 免费php资源
                                  免费php资源 2
                                  北京市 14F
                                  回复

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

                                  • 免费php资源
                                    免费php资源 2
                                    北京市 15F
                                    回复

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

                                    • root
                                      root 0
                                      北京市 16F
                                      回复

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

                                        • 牛德雷
                                          牛德雷 2
                                          河北省邯郸市 B1
                                          回复

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

                                        • 幸福守候
                                          幸福守候 0
                                          浙江省杭州市 17F
                                          回复

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

                                          • SEO爱好者
                                            SEO爱好者 1
                                            福建省泉州市 18F
                                            回复

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

                                            • 蚂蚁
                                              蚂蚁 1
                                              河南省新乡市 19F
                                              回复

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

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

                                              不过js还是收藏了

                                              • ilunpo
                                                ilunpo 2
                                                黑龙江省哈尔滨市 20F
                                                回复

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

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

                                                  • 知更鸟
                                                    知更鸟
                                                    中国 B1
                                                    回复

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

                                                      • ilunpo
                                                        ilunpo 2
                                                        天津市 B2
                                                        回复

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

                                                        • ilunpo
                                                          ilunpo 2
                                                          天津市 B2
                                                          回复

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

                                                    匿名

                                                    发表评论

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

                                                    拖动滑块以完成验证