WordPress使用純CSS自動調整圖片大小

Aug022013

作者：超级efly 发布：2013-08-02 06:56 分类：WordPress 阅读：6,020 38条评论

在某些WordPress主題下，圖片即使特別的大，也會自動縮小成和文章寬度一樣的，所以今天就教大家如何實現這個實用的功能

教程

1、打開你的「樣式表 (style.css)」文件，然後在 p img{ 或類似的地方添加下列代碼（可以將所有 550 改成你想要的寬度）

p img{
	max-width: 550px;
	width: expression(this.width > 550 ? "550px" : true);
	height: auto;
}

p img{

max-width: 550px;

width: expression(this.width > 550 ? "550px" : true);

height: auto;

}

2、然後清空瀏覽器緩存就可以啦！

PS：其實這個方法可以用在所有網站（不限於WordPress）

PS2：圖片圓角方法可參考「使用CSS3為圖片自動添加圓角」

預覽

历史上的今天

2014年：純代碼為WordPress 3.5及其以後之版本找回「鏈接」功能（27条评论）

觉得这篇文章有用吗？分享一下让更多人受益吧！

本文固定链接：https://www.arefly.com/wordpress-css-auto-size/

本文章由“超级efly”于2013年08月02日发表于“WordPress”分类

你可以发表评论，并在保留原文地址及作者的情况下引用到你的网站

转载请注明：WordPress使用純CSS自動調整圖片大小 | 畅想资源

关键字：CSS, WordPress, 圖片

[上一篇] 使用CSS3為圖片自動添加圓角

[下一篇] 為WordPress可視化編輯器添加更多功能

您可能还会对这些文章感兴趣！

WordPress使用純CSS自動調整圖片大小：目前有 38 条留言
访客以 20：18 暂时领先博主

评论载入中，请稍等……

9楼
牧羊人 ：

这个好像失效了。。。

2016-11-26 下午9:52 [回复]
8楼
胡思玄 ：

Hi，大大，小弟是 ZETAIL 的創辦人（ http://www.zetail.com.tw ），是 WordPress 的新手，看到您這套留言系統好像很不錯（還會出現留言者的所在國家、瀏覽器及電腦系統），可以請問一下叫什麼名字嗎？

再順便問一下，您使用的這套留言系統跟 DISQUS 比較，哪一套比較方便好用呢？

2015-08-12 下午3:47 [回复]
- 超級efly ：
  
  其實我用的就是WordPress自帶的評論系統哦（再加上主題的CSS等）～另外留言者的所在國家、瀏覽器及電腦系統是用「這樣的方法」加入的
  
  至於於 DISQUS 對比、如果你想要省事當然直接用 DISQUS 比較好，但比功能的話肯定WordPress自帶的可擴展性高
  
  還有問題的話可以繼續回覆哦～
  
  2015-08-12 下午3:58 [回复]
  - 胡思玄 ：
    
    了解了~~謝謝喔！！我現在先繼續用簡單的 DISQUS 好了XD
    
    2015-08-12 下午7:10 [回复]
- 超級efly ：
  
  另外也可以加我Facebook討論哦：https://www.facebook.com/eflyjason
  
  2015-08-12 下午4:01 [回复]
7楼
东：

网站换主题了吗，很清新。对于图片，还是习惯处理好了再上传。

2015-02-25 下午11:16 [回复]
6楼
JV ：

我都是文章主体限宽，然后图片宽度100%就完了。这种方法没试过。

2015-02-20 下午8:00 [回复]
- 超级efly ：
  
  100%宽似乎会拉长小的图片～强迫症
  
  2015-02-21 下午1:34 [回复]
5楼
iEdon Inside ：

有些老浏览器不支持哦~

2014-08-20 下午9:55 [回复]
- 超級efly ：
  
  是啊... 不過反正我已經放棄了老瀏覽器
  
  2014-08-20 下午10:28 [回复]
4楼
牧魂：

这个还真是没试过。

2014-08-20 下午5:01 [回复]
- 超級efly ：
  
  歡迎嘗試～～
  
  2014-08-20 下午10:27 [回复]
地板
Eason Chen ：

請問"貳零壹貳"這個主題怎麼自動圖片大小?
圖片上傳後預設是300px ,她寬度不會自動調到625px
要在顯示設定-大小把照片調成1600*1200px,她才會在文章中顯示625px
可不可以自動調成625px,不用在去顯示設定-大小調1600*1200px?

2014-05-10 下午11:38 [回复]
- 超級efly ：
  
  是不是你想要把小的圖片自動在文章中放大顯示？
  
  2014-05-13 上午6:25 [回复]
  - EasonChen ：
    
    yes!
    
    2014-05-14 下午8:22 [回复]
    - 超級efly ：
      
      試試看：
      
      p img{ max-width: 625px; width: 625px; height: auto; }
      
      1
      2
      3
      4
      5
      
      p img{
          max-width: 625px;
          width: 625px;
          height: auto;
      }
      
      2014-05-14 下午10:15 [回复]
      - Eason Chen ：
        
        成功了!
        話說從台灣連到Digitalocean舊金山機房比新加坡機房快很多= =
        //Amazon EC2用不到3天流量就用完20GB了...只好放棄
        
        2014-05-14 下午11:10 [回复]
        
        超級efly ：
        
        可是似乎舊金山機房的配置沒有新加坡好～
        速度要是快很多，下次我也換過去～
        
        2014-05-15 下午10:55 [回复]
        
        Eason Chen ：
        
        右下角的"網友交流"是怎麼加上去的?
        請教一下?
        
        2014-05-16 下午11:14 [回复]
        
        超級efly ：
        
        用的是一個叫做「Live Chat」的WordPress外掛（插件）
        
        2014-05-17 下午1:04 [回复]
        
        justatday ：
        
        Thanks you for share
        
        2014-05-17 下午5:11 [回复]
        
        超級efly ：
        
        u're welcome
        
        2014-05-19 下午10:23 [回复]
        
        Eason Chen ：
        
        我用1.7.9正版...
        
        2014-05-16 下午11:35 [回复]
        
        超級efly ：
        
        需要使用1.7.2版本才能進入。。。
        
        2014-05-17 下午1:04 [回复]
板凳
EasonChen ：

找不到阿
在哪?
http://pastebin.com/MN7mhthb

2013-10-06 下午4:04 [回复]
- 超級efly ：
  
  p img{ max-width:550px; width: expression(this.width > 550 ? "550px" : true); height:auto; }
  
  1
  2
  3
  4
  5
  
  p img{
      max-width:550px;
      width: expression(this.width > 550 ? "550px" : true);
      height:auto;
  }
  
  直接添加這一段到 style.css 就行了
  
  2013-10-06 下午4:33 [回复]
沙发
我的名字叫麒 ：

怎么是繁体字

2013-08-02 上午8:32 [回复]
- 超級efly ：
  
  我在香港啊
  
  2013-08-02 下午7:03 [回复]
  - 我的名字叫麒 ：
    
    香港的Google单价是多少
    
    2013-08-04 下午7:34 [回复]
    - 超級efly ：
      
      什麼是「Google單價」？
      
      2013-08-04 下午7:35 [回复]
      - 我的名字叫麒 ：
        
        就是点击一次谷歌广告，价钱是多少？
        
        2013-08-11 下午4:28 [回复]
        
        超級efly ：
        
        沒注意，Google官方說過麼？
        
        2013-08-11 下午6:52 [回复]
        
        我的名字叫麒 ：
        
        我知道还问你！
        
        2013-08-12 下午7:05 [回复]
        
        超級efly ：
        
        可是Google應該沒有「明碼標價」啊？
        
        2013-08-12 下午11:26 [回复]
        
        我的名字叫麒 ：
        
        换个问法：应该比大陆高，高多少？
        
        2013-08-14 上午5:34 [回复]
        
        超級efly ：
        
        應該全球各地的Google單價都是差不多的吧。。。
        
        2013-08-14 上午9:01 [回复]
        
        我的名字叫麒 ：
        
        北美地区和加拿大的，比其他地方高！
        
        2013-08-16 上午11:21 [回复]
        
        超級efly ：
        
        對，但是「中國」和「香港」應該沒啥區別吧
        
        2013-08-16 下午12:32 [回复]