下面我們再插入尺寸大于div的圖片

來看看效果：
 

這里的圖片過大，溢出了div，這里來探討一下解決方案：

 解決方案一

在css中設(shè)置該圖片的樣式，把最大寬設(shè)置為小于它父級div的寬

img {    max-width: 730px;}

但是這樣對于不同分辨率的屏幕，也會出現(xiàn)溢出的問題

先來看一下1366*728的分辨率（本機分辨率）下的圖片顯示情況：

似乎解決了問題，我們把分辨率調(diào)為 1024*768，來看看效果：

圖片還是溢出來了，對于這種分辨率的屏幕，肯定體驗很不友好。

那么，為了解決還是溢出的問題，可以加入另外一種方法：

解決方案二

不顯示溢出的部分：

overflow: hidden;

這個代碼加在div_left 下面：

CSS Code復制內(nèi)容到剪貼板

2. #div_left {   
       width:70%;   
       height: 800px;   
       float:left;   
       padding: 20px;   
     
       overflow: hidden;   
   }

顯然，這種方法的弊端就是圖片不能完全顯示，我們來試試：

雖然解決了溢出的問題，但是顯示效果上不友好，如果被隱藏的部分剛好有重要的信息，那么這樣的設(shè)計是不合理的。
 
最終解決方案

要滿足解決圖片溢出div問題，同時圖片能完整顯示，也要兼容不同的分辨率這三個條件，這里用一段JavaScript代碼來解決。

思路是獲取 div 的寬，然后動態(tài)設(shè)置圖片的寬度，就這么簡單。

在敲代碼之前，先刪除 overflow:hidden; 代碼，這種“將就”的處理方法我們應該摒棄。

JavaScript Code復制內(nèi)容到剪貼板

2. window.onload = function(){   
       var getEle = document.getElementsByTagName("img");   
       var getEle_divLeft = document.getElementById("div_left");   
       for(var i=0; i

在1028*768的屏幕下的效果：

在1366*768下的效果：

可能存在的bug及解決對策

有些div在開始加載的時候，會因為圖片的寬度比較大而變寬，然后再由于布局浮動的影響再變小，由于圖片獲取的是一開始的div寬度，所以他的寬度還是不變。

這里給出保守的解決方案：

在css中，先把圖片屬性設(shè)置為none，不顯示。在加載javascript代碼的時候，設(shè)置寬高，再顯示出來：

CSS Code復制內(nèi)容到剪貼板

1. img {   
       max-width: 730px;   
       display: none;   
   }

在JavaScript后面加入顯示圖片代碼：

getEle[i].style["display"] = "inline";

在代碼中的位置：

JavaScript Code復制內(nèi)容到剪貼板

1. window.onload = function(){   
       var getEle = document.getElementsByTagName("img");   
       var getEle_divLeft = document.getElementById("div_left");   
       for(var i=0; i

這樣就解決了這個圖片顯示溢出div問題，并滿足上面三個條件。

完整代碼：

XML/HTML Code復制內(nèi)容到剪貼板

1.   
     
         
         
     
     
     
   #div_home {   
       width:80%;   
       margin: 0 auto;   
   }   
     
   #div_left {   
       width:70%;   
       height: 800px;   
       float:left;   
       background-color: #836FFF;   
     
       padding: 20px;   
   }   
     
   #div_right {   
       width: 15%;   
       float: right;   
       height: 800px;   
       background-color: #CDCD00;   
     
       padding: 20px;   
   }   
     
   img {   
       max-width: 730px;   
       display: none;   
   }   
     
     
     
     
     
     
     
     
     
         
             
                 
                 
             
             
         
     
   

補充：

如果瀏覽器不支持max-width屬性，可以給出一個判斷，具體思路如下：

如果瀏覽器不支持某個CSS屬性，那么得到的返回值為undefined，如果支持，則返回空，基于這一點，我們可以加一個判斷

代碼：

XML/HTML Code復制內(nèi)容到剪貼板

1. if(getEle[0].style["max-width"]==''){   
   //支持max-width的瀏覽器       
   }else{   
   //不支持max-width的處理   
   }

JavaScript Code復制內(nèi)容到剪貼板

以上就是怎樣快速解決圖片溢出div的問題，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。