Javascript+CSS控制日志圖片大小

知更鳥
知更鳥
知更鳥
1553
文章
6920
評論
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 為所用主題選擇器。

編輯文章時手動將插入的圖片拖小,個人認為一勞永逸。

weinxin
版權聲明
本站原創文章轉載請注明文章出處
js實時獲取瀏覽器窗口大小 Web前端

js實時獲取瀏覽器窗口大小

js實時獲取瀏覽器窗口大小,我們可以使用addEventListener()方法來實現。該addEventListener()方法可以注冊事件處理程序以偵聽瀏覽器窗口resize事件,例如window...
WordPress 3D旋轉標簽云 WordPress

WordPress 3D旋轉標簽云

這個3D標簽云可不是N年前的那個Flash版的 wp-cumulus, 這個3D旋轉標簽云完全使用JS代碼編寫,很小只有幾K,不用擔心像垃圾Flash對資源的耗費。 具體效果看本文的側邊欄標簽云。 下...
匿名

發表評論

匿名網友 填寫信息

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

評論:28   其中:訪客  24   博主  4
    • 張磊先生 張磊先生 4

      艾瑪!搶到了沙發!支持博主!

      • 薩龍龍 薩龍龍 4

        難怪我的網站圖片在IE下有點拉伸,之前把第一段代碼中的寬度寫在CSS中,兼容性差了很多。

        • 清新物語 清新物語 4

          謝謝鳥哥,這么快回答我的疑問

          • 凌晨瘋子 凌晨瘋子 2

            鳥哥,怎么樣才能把CMS的首頁幻燈欄做成你這樣的呢?就是幻燈圖+熱點推薦+滾動標題的三格式。

            • 第九技術 第九技術 1

              不錯,很詳細。

              • 奇跡私服 奇跡私服 2

                這是縮略的吧

                • 車來車往 車來車往 2

                  找不到圖片模板 和首頁模板 在哪里有下載

                  • 魔域sf 魔域sf 2

                    這個是縮略圖吧,不知道效果怎么樣啊

                    • 小譚 小譚 1

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

                        • 知更鳥 知更鳥

                          @ 小譚 對喜歡折騰版權鏈接的,俺懶得說什么了

                        • 唐浩賓博客 唐浩賓博客 0

                          正打算用鳥哥的主題做站呢!~!~支持一個!~

                          • 優卓市場 優卓市場 0

                            不錯的方法,收藏了

                            • 電腦天空 電腦天空 5

                              鳥哥,請問 怎么 增加百度搜索,谷歌的不給力啊,WP自帶的搜索也不準確,謝謝了。

                              • lwxining lwxining 1

                                問一個問題哈為什么我用你的主題后,打開公告提示多重重定向是怎么回事啊?cpanel面板

                                • 免費php資源 免費php資源 2

                                  鳥哥的空間 終于可以訪問了 很是開心啊 祝賀

                                  • 免費php資源 免費php資源 2

                                    為什么我用的hotnews2.7主體 打開網站的時候 總要閃爍一下

                                    • root root 0

                                      為什么我用的hotnews2.7主體 打開網站的時候 總要閃爍一下

                                        • 牛德雷 牛德雷 3

                                          @ root 我的網站也是這個問題,同求解決辦法

                                        • 幸福守候 幸福守候 0

                                          圖片如果加入“說明”,效果就會消失。此外這個主題的文章中如果插入圖片時填寫“說明”的話,圖片下面的說明文字不會居中,有時間幫忙看看這個可以解決嗎?最好在填寫圖片說明的時候文字居中,并且可以自動顯示設置好的寬度。

                                          • SEO愛好者 SEO愛好者 1

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

                                            • 螞蟻 螞蟻 1

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

                                              不設置高度的情況下
                                              max-widht谷歌火狐支持還是比較好的
                                              IE 用下面表達式也能救救急。
                                              直接加表達式改CSS 反正博客不用考慮太多性能~

                                              不過js還是收藏了

                                              • ilunpo ilunpo 2

                                                鳥哥,hotnews主題文章編輯器有問題:插入圖片后,輸入光標無法調位置/

                                                輸入文本無法從圖片下面寫起。
                                                復制進入的文本顯示在圖片之上。。。只能用文本輸入。可是又不直觀。如何解決

                                                  • 知更鳥 知更鳥

                                                    @ ilunpo 你能確定是hotnews主題文章編輯器有問題,還是Wordpress文章編輯器有問題
                                                    還是自己基本編輯操作還沒弄明白

                                                      • ilunpo ilunpo 2

                                                        @ 知更鳥 是我不太習慣worldpress。不好意思。
                                                        慢慢學習。

                                                        • ilunpo ilunpo 2

                                                          @ 知更鳥 是我不太習慣wordpress。不好意思。
                                                          慢慢學習。