真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

HTML中圖片溢出div怎么辦

小編給大家分享一下HTML中圖片溢出div怎么辦，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)是一家專業(yè)提供溫宿企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站制作、做網(wǎng)站、H5高端網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為溫宿眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進行中。

首先我們先來做個簡單的css布局：



    
    div圖片溢出的解決方案#div_home {
    width:80%;
    margin: 0 auto;} #div_left {
    width:70%;
    height: 800px;
    float:left;   
    padding: 20px;}#div_right {
    width: 15%;
    float: right;
    height: 800px;
    padding: 20px;}
    
        
            
        
        
    

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

解決方案一

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

img {
    max-width: 730px;
}

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

解決方案二

不顯示溢出的部分：

overflow: hidden;

這個代碼加在div_left 下面：

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

顯然，這種方法的弊端就是圖片不能完全顯示

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

最終解決方案

要滿足解決圖片溢出div問題，同時圖片能完整顯示，也要兼容不同的分辨率這三個條件，這里用一段JavaScript代碼來解決。
思路是獲取 div 的寬，然后動態(tài)設(shè)置圖片的寬度，就這么簡單。

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

window.onload = function(){    var getEle = document.getElementsByTagName("img");    var getEle_divLeft = document.getElementById("div_left");    for(var i=0; i
可能存在的bug及解決對策
有些div在開始加載的時候，會因為圖片的寬度比較大而變寬，然后再由于布局浮動的影響再變小，由于圖片獲取的是一開始的div寬度，所以他的寬度還是不變。
這里給出保守的解決方案：
在css中，先把圖片屬性設(shè)置為none，不顯示。在加載javascript代碼的時候，設(shè)置寬高，再顯示出來：
img {    max-width: 730px;    display: none;}
在JavaScript后面加入顯示圖片代碼：
getEle[i].style["display"] = "inline";
在代碼中的位置：
window.onload = function(){    var getEle = document.getElementsByTagName("img");    var getEle_divLeft = document.getElementById("div_left");    for(var i=0; i
這樣就解決了這個圖片顯示溢出div問題，并滿足上面三個條件。
完整代碼：

   
   div圖片溢出的解決方案#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;}window.onload = function(){    var getEle = document.getElementsByTagName("img");    var getEle_divLeft = document.getElementById("div_left");    for(var i=0; i
   
       
           
           
       
       
   

 
補充：
如果瀏覽器不支持max-width屬性，可以給出一個判斷，具體思路如下：
如果瀏覽器不支持某個CSS屬性，那么得到的返回值為undefined，如果支持，則返回空，基于這一點，我們可以加一個判斷
代碼：
if(getEle[0].style["max-width"]==''){//支持max-width的瀏覽器    }else{//不支持max-width的處理}

window.onload = function(){    var getEle = document.getElementsByTagName("img");    var getEle_divLeft = document.getElementById("div_left");    if(getEle[0].style["max-width"]==''){for(var i=0; i getEle_divLeft.offsetWidth-40){
               getEle[i].style["width"] = getEle_divLeft.offsetWidth - 40 + "px"; 
           }
           getEle[i].style["display"] = "inline";
       }
   }
}
看完了這篇文章，相信你對“HTML中圖片溢出div怎么辦”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
            
            
                        

            當前文章：HTML中圖片溢出div怎么辦            

            標題路徑：http://weahome.cn/article/ihphop.html
        
    






    

        

            
                
                
在線咨詢

            
        

    

    

        
微信咨詢

        

    

    

        
電話咨詢

        

            
028-86922220（工作日）

            
18980820575（7×24）

        

    

    

        

            
                
提交需求

            
        

    

    

        

            
                
返回頂部