做網頁、論壇貼圖、寫部落格。只要有需要上傳圖片的機會，就一定常碰到這問題。一旦不小心上傳一個大於版面的圖片，輕則內容被蓋住，重則排版全亂掉，畫面慘不忍睹。
一般的css處理方法都是靠 over-flow:hidden; 來達成的。但這樣做有個缺點，跑出去的內容會被隱藏起來。如果文字跟著被隱藏的話就看不到了。
在這裡提供一個同樣用css的解決辦法吧，能夠自動調整圖片大小。其實在Mozilla系列瀏覽器中都支援Max與Min的大小設定，只要css做這樣處理，就能限定任何元素的最大或最小長寬。
不過偉大的Microsoft硬是不支援這指令，我們只好拉長程式碼啦，整個代碼變得落落長，因為插入了javascript在裡面。
請先打開你的網站css檔案
輸入以下代碼：
img { max-width:600px; myimg:expression(onload=function(){ this.style.width=(this.offsetWidth > 600)?"600px":"auto"}); }
你可以將600設為任何你要的寬度
若只想限定某個區域中的圖片，請輸入：
#div img { max-width:600px; myimg:expression(onload=function(){ this.style.width=(this.offsetWidth > 600)?"600px":"auto"}); }
#div就是那個區域的id，意思是＃div底下所有標籤為img的元素皆適用這個設定。如此應該就能看到成效了。
我們來看看效果
原本
修改後
圖片被壓縮至600px，也可以看到文字乖乖的待在應有的區域中不會亂跑。
這樣對於許多套用人家模板卻大小不足，或是經常無法控制使用者是否上傳過大圖片在網站上的管理者來說，是很方便可以一次控制全站圖片大小的方法。
轉載請註明來自【Asika Paradise - 飛鳥新樂園】
|
|
文章回應
#div img {
max-width:600px;
myimg:expression(onload=function(){
this.style.width=(this.offsetWidth > 600)?"600px":"auto"});
請問要怎麼才能知道....各個版面位置的div 名稱為啥>>
因為我只想要一部分，而不是整個網站都是width=600
#div 其實指的是那個區塊的 id 或 class ，我的寫法算是針對稍微瞭解css的使用者。
比如： ＜div id="123"＞那就輸入 #123 img {...} 即可
真的不瞭解css請參考 http://blog.asikart.com/-mainmenu-36/1/59-css.html
我想請問如果要使用joomla架設像您如此美觀優質的blog該使用甚麼套件呢
我在joomla之門有看到mms blog的介紹
不知道您是否就是使用此套件
其他擴充套件可以參考這篇文章：http://blog.asikart.com/-mainmenu-36/sitemessage/104-2008-11-24-09-14-14.html
最近工作繁重，三四月間會開始進行更詳細的joomla blog教學，您可以密切注意一下
因為我有使用virtuemart
http://www.tbsc.com.tw/image/ask01.jpg
如上面圖片所示，我的圖片大小超過了該頁面大小。
我知道要去改css
只是我不知道css該改哪一段，我並不知道virtuemart該頁面是哪一段div
我嘗試了好幾個，結果都影響到整個網站
我只想要限制該商品頁面的商品圖片大小
請輸入：
Quote:
試試看
要注意太大的圖還是縮一下吧
因為這段程式碼不會等比例縮放
只會左右縮窄而已