html如何解决图片溢出,图片溢出div，超出div解决办法

最近在写网页的时候，遇到一个问题

图片溢出

当我的图片宽度大小没有设置，过大的时候，它会超出我的div宽度。这个时候，我给它设置了一个小于我的div的宽度，它是可以进入div盒子而不溢出的，然而，当我们的浏览器缩小的时候，我的div是栅格布局，固定了百分比会随浏览器可视界面而缩小，但是此时图片因为固定宽度不能同步缩小，还是会发生溢出现象。还有一种将就的办法，就是设置overflow:hidden,隐藏溢出的部分，但是大家都可以预料的到那种糟糕的效果

我的解决办法

方法一

给图片设置width:100%

此时的显示效果

方法一

在响应式模式下也可以自己随盒子缩放

响应式

方法二

可以使用一段js来解决

window.onload = function(){

//获取图片元素

var imgs = document.getElementsByTagName("img");

//获取div元素

var contentLeft = document.getElementById("col-md-7");

//使用js设置图片元素宽度的变化

for(var i=0; i

imgs[i].style["max-width"] = contentLeft.offsetWidth - 40 + "px";

}

}

//40是要减去padding

此时的效果

image.png

然而，此时还有一个问题，因为是onload，所以当浏览器宽度发生变化时

image.png

它还是会超出div

于是想到了监听浏览器窗口变化

网上有很多种使用jquery监听的，其实可以使用window自带属性

window.onresize监听

加入代码如下

window.onresize = function(){

var imgs = document.getElementsByTagName("img");

var contentLeft = document.getElementById("col-md-7");

for(var i=0; i

imgs[i].style["max-width"] = contentLeft.offsetWidth - 40 + "px";

}

}

image.png

此时无论怎么响应，图片永远不会溢出

完整代码如下

div图片溢出

#container {

width:80%;

margin: 0 auto;

}

#col-md-7 {

width:70%;

height: 800px;

float:left;

border:1px solid red;

padding: 20px;

}

#col-md-5 {

width: 15%;

float: right;

height: 800px;

border:1px solid blue;

padding: 20px;

}

img {

max-width: 730px;

}

window.onload = function(){

var imgs = document.getElementsByTagName("img");

var contentLeft = document.getElementById("col-md-7");

for(var i=0; i

imgs[i].style["max-width"] = contentLeft.offsetWidth - 40 + "px";

}

}

window.onresize = function(){

var imgs = document.getElementsByTagName("img");

var contentLeft = document.getElementById("col-md-7");

for(var i=0; i

imgs[i].style["max-width"] = contentLeft.offsetWidth - 40 + "px";

}

}