圖片溢出div問題的最終解決方案

時間 2019-12-02

標籤圖片溢出 div 問題最終解決方案欄目 CSS 简体版

原文原文鏈接

2016.11.20備註：javascript

此問題經過css的max-width:100%;便可解決。css

　　前兩天編寫了一個前端頁面，在本機上顯示一切正常。不過在不斷的測試中，發現了一個嚴重的問題，若是圖片過大，會撐破div溢出來。再因爲頁面是自適應頁面，根據不一樣分辨率的顯示器會作出相應的div寬度調整，因此圖片即便不大，可是因分辨率不一樣也會出現溢出的狀況。

　　這裏探討總結一下解決方法。

　　首先咱們先來作個簡單的css佈局：html

<html>
<head>
    <meta charset="utf-8" />
    <title>div圖片溢出的解決方案</title>

<style type="text/css">
#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;

}
</style>

<script type="text/javascript">
</script>

</head>

<body>
    <div id="div_home">
        <div id="div_left">
            <img src="http://images.cnblogs.com/cnblogs_com/hlwyfeng/600950/o_123.png" alt="小圖片"/>
        </div>
        <div id="div_right"></div>
    </div>
</body>
</html>

　　下面咱們再插入尺寸大於div的圖片前端

<img id="img_test" src="http://www.xiaoxiongbizhi.com/wallpapers/__85/y/w/ywzwdjof0.jpg" alt="大圖片"/>

　　來看看效果：

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

解決方案一

　　在css中設置該圖片的樣式，把最大寬設置爲小於它父級div的寬瀏覽器

img {
    max-width: 730px;
}

　　可是這樣對於不一樣分辨率的屏幕，也會出現溢出的問題

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

　　彷佛解決了問題，咱們把分辨率調爲 1024*768，來看看效果：測試

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

　　那麼，爲了解決仍是溢出的問題，能夠加入另一種方法：spa

解決方案二

　　不顯示溢出的部分：設計

overflow: hidden;

　　這個代碼加在div_left 下面：

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

    overflow: hidden;
}

　　顯然，這種方法的弊端就是圖片不能徹底顯示，咱們來試試：

　　雖然解決了溢出的問題，可是顯示效果上不友好，若是被隱藏的部分恰好有重要的信息，那麼這樣的設計是不合理的。

最終解決方案

　　要知足解決圖片溢出div問題，同時圖片能完整顯示，也要兼容不一樣的分辨率這三個條件，這裏用一段JavaScript代碼來解決。
　　思路是獲取 div 的寬，而後動態設置圖片的寬度，就這麼簡單。

　　在敲代碼以前，先刪除 overflow:hidden; 代碼，這種「將就」的處理方法咱們應該摒棄。

window.onload = function(){
    var getEle = document.getElementsByTagName("img");
    var getEle_divLeft = document.getElementById("div_left");
    for(var i=0; i<getEle.length; i++){
        getEle[i].style["max-width"] = getEle_divLeft.offsetWidth - 40 + "px"; //這裏-40是padding的左右寬度和
    }
}

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

　　在1366*768下的效果：

可能存在的bug及解決對策

　　有些div在開始加載的時候，會由於圖片的寬度比較大而變寬，而後再因爲佈局浮動的影響再變小，因爲圖片獲取的是一開始的div寬度，因此他的寬度仍是不變。

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

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

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<getEle.length; i++){
        getEle[i].style["max-width"] = getEle_divLeft.offsetWidth - 40 + "px"; //這裏-40是padding的左右寬度和
        getEle[i].style["display"] = "inline";
    }
}

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

　　完整代碼：

<html>
<head>
    <meta charset="utf-8" />
    <title>div圖片溢出的解決方案</title>

<style type="text/css">

#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;
}

</style>

<script type="text/javascript">

window.onload = function(){
    var getEle = document.getElementsByTagName("img");
    var getEle_divLeft = document.getElementById("div_left");
    for(var i=0; i<getEle.length; i++){
        getEle[i].style["max-width"] = getEle_divLeft.offsetWidth - 40 + "px"; //這裏-40是padding的左右寬度和
        getEle[i].style["display"] = "inline";
    }
}

</script>

</head>


<body>
    <div id="div_home">
        <div id="div_left">
            <img src="http://images.cnblogs.com/cnblogs_com/hlwyfeng/600950/o_123.png" alt="小圖片"/>
            <img src="http://www.xiaoxiongbizhi.com/wallpapers/__85/y/w/ywzwdjof0.jpg" alt="大圖片"/>
        </div>
        <div id="div_right"></div>
    </div>
</body>
</html>

補充：

若是瀏覽器不支持max-width屬性，能夠給出一個判斷，具體思路以下：

若是瀏覽器不支持某個CSS屬性，那麼獲得的返回值爲undefined，若是支持，則返回空，基於這一點，咱們能夠加一個判斷

代碼：

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

<script type="text/javascript">

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.length; i++){
            getEle[i].style["max-width"] = getEle_divLeft.offsetWidth - 40 + "px"; //這裏-40是padding的左右寬度和
            getEle[i].style["display"] = "inline";
        }
    }else{
        //不支持max-width的解決方案
        for(var i=0; i<getEle.length; i++){
            if(getEle[i].width > getEle_divLeft.offsetWidth-40){
                getEle[i].style["width"] = getEle_divLeft.offsetWidth - 40 + "px"; 
            }
            getEle[i].style["display"] = "inline";
        }
    }
}

</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。