TShopping

 找回密碼
 註冊
搜索
查看: 86|回復: 0

[教學] [CSS]讓圖片自動適應div大小

[複製鏈接]
發表於 2018-12-18 21:52:24 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
做網頁、論壇貼圖、寫部落格。只要有需要上傳圖片的機會,就一定常碰到這問題。一旦不小心上傳一個大於版面的圖片,輕則內容被蓋住,重則排版全亂掉,畫面慘不忍睹。

  一般的css處理方法都是靠 over-flow:hidden; 來達成的。但這樣做有個缺點,跑出去的內容會被隱藏起來。如果文字跟著被隱藏的話就看不到了。

  在這裡提供一個同樣用css的解決辦法吧,能夠自動調整圖片大小。其實在Mozilla系列瀏覽器中都支援Max與Min的大小設定,只要css做這樣處理,就能限定任何元素的最大或最小長寬。

  不過偉大的Microsoft硬是不支援這指令,我們只好拉長程式碼啦,整個代碼變得落落長,因為插入了javascript在裡面。

請先打開你的網站css檔案
輸入以下代碼:

  1. img {
  2. max-width:600px;
  3. myimg:expression(onload=function(){
  4. this.style.width=(this.offsetWidth > 600)?"600px":"auto"});
  5. }
複製代碼

你可以將600設為任何你要的寬度

若只想限定某個區域中的圖片,請輸入:

  1. #div img {
  2. max-width:600px;
  3. myimg:expression(onload=function(){
  4. this.style.width=(this.offsetWidth > 600)?"600px":"auto"});
  5. }
複製代碼

#div就是那個區域的id,意思是#div底下所有標籤為img的元素皆適用這個設定。如此應該就能看到成效了。

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

 

臉書網友討論
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2019-1-23 03:24 , Processed in 0.050862 second(s), 21 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表