溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下HTML中圖片溢出div怎么辦，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
首先我們先來做個簡單的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>下面我們再插入尺寸大于div的圖片
<img id="img_test" src="http://www.xiaoxiongbizhi.com/wallpapers/__85/y/w/ywzwdjof0.jpg" alt="大圖片"/>
解決方案一
在css中設置該圖片的樣式，把最大寬設置為小于它父級div的寬
img {
max-width: 730px;
}但是這樣對于不同分辨率的屏幕，也會出現溢出的問題
解決方案二
不顯示溢出的部分：
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的左右寬度和 }
}可能存在的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>看完了這篇文章，相信你對“HTML中圖片溢出div怎么辦”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
