做網頁、論壇貼圖、寫部落格。只要有需要上傳圖片的機會,就一定常碰到這問題。一旦不小心上傳一個大於版面的圖片,輕則內容被蓋住,重則排版全亂掉,畫面慘不忍睹。

  一般的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的元素皆適用這個設定。如此應該就能看到成效了。

文章來源:http://blog.asikart.com/-joomla-31/128-cssdiv.html

goodlucky 發表在 痞客邦 PIXNET 留言(0) 人氣()