HTML中圖片溢出div怎么辦

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

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

首先我們先來(lái)做個(gè)簡(jiǎn)單的css布局：

<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>

下面我們?cè)俨迦氤叽绱笥赿iv的圖片

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

解決方案一

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

img {
    max-width: 730px;
}

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

解決方案二

不顯示溢出的部分：

overflow: hidden;

這個(gè)代碼加在div_left 下面：

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

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

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

最終解決方案

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

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

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的左右寬度和    }
}

可能存在的bug及解決對(duì)策

有些div在開(kāi)始加載的時(shí)候，會(huì)因?yàn)閳D片的寬度比較大而變寬，然后再由于布局浮動(dòng)的影響再變小，由于圖片獲取的是一開(kāi)始的div寬度，所以他的寬度還是不變。
這里給出保守的解決方案：
在css中，先把圖片屬性設(shè)置為none，不顯示。在加載javascript代碼的時(shí)候，設(shè)置寬高，再顯示出來(lái)：

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

這樣就解決了這個(gè)圖片顯示溢出div問(wèn)題，并滿(mǎn)足上面三個(gè)條件。
完整代碼：

<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>

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

看完了這篇文章，相信你對(duì)“HTML中圖片溢出div怎么辦”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

新聞名稱(chēng)：HTML中圖片溢出div怎么辦
網(wǎng)站地址：http://chinadenli.net/article8/ihphop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開(kāi)發(fā)、網(wǎng)站建設(shè)、ChatGPT、定制開(kāi)發(fā)、動(dòng)態(tài)網(wǎng)站、靜態(tài)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

HTML中圖片溢出div怎么辦