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

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

HTML中圖片溢出div怎么辦-創(chuàng)新互聯(lián)

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

10年積累的網(wǎng)站建設(shè)、網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有古塔免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

首先我們先來做個(gè)簡單的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的圖片

img {
    max-width: 730px;
}
但是這樣對于不同分辨率的屏幕，也會出現(xiàn)溢出的問題
解決方案二
不顯示溢出的部分：
overflow: hidden;
這個(gè)代碼加在div_left 下面：
#div_left {
    width:70%;
    height: 800px;
    float:left;
    padding: 20px;
    overflow: hidden;
}
顯然，這種方法的弊端就是圖片不能完全顯示
雖然解決了溢出的問題，但是顯示效果上不友好，如果被隱藏的部分剛好有重要的信息，那么這樣的設(shè)計(jì)是不合理的。
最終解決方案
要滿足解決圖片溢出div問題，同時(shí)圖片能完整顯示，也要兼容不同的分辨率這三個(gè)條件，這里用一段JavaScript代碼來解決。
思路是獲取 div 的寬，然后動態(tài)設(shè)置圖片的寬度，就這么簡單。

在敲代碼之前，先刪除 overflow:hidden; 代碼，這種“將就”的處理方法我們應(yīng)該摒棄。
window.onload = function(){    var getEle = document.getElementsByTagName("img");    var getEle_divLeft = document.getElementById("div_left");    for(var i=0; i
可能存在的bug及解決對策
有些div在開始加載的時(shí)候，會因?yàn)閳D片的寬度比較大而變寬，然后再由于布局浮動的影響再變小，由于圖片獲取的是一開始的div寬度，所以他的寬度還是不變。
這里給出保守的解決方案：
在css中，先把圖片屬性設(shè)置為none，不顯示。在加載javascript代碼的時(shí)候，設(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
這樣就解決了這個(gè)圖片顯示溢出div問題，并滿足上面三個(gè)條件。
完整代碼：

   
   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
   
       
           
           
       
       
   

 
補(bǔ)充：
如果瀏覽器不支持max-width屬性，可以給出一個(gè)判斷，具體思路如下：
如果瀏覽器不支持某個(gè)CSS屬性，那么得到的返回值為undefined，如果支持，則返回空，基于這一點(diǎn)，我們可以加一個(gè)判斷
代碼：
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è)資訊頻道，感謝各位的閱讀！
            

            當(dāng)前題目：HTML中圖片溢出div怎么辦-創(chuàng)新互聯(lián)            

            本文網(wǎng)址：http://weahome.cn/article/echdi.html
        
    






    

        

            
                
                
在線咨詢

            
        

    

    

        
微信咨詢

        

    

    

        
電話咨詢

        

            
028-86922220（工作日）

            
18980820575（7×24）

        

    

    

        

            
                
提交需求

            
        

    

    

        

            
                
返回頂部