图片溢出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

方法三

1. 使用CSS max-width和max-height实现图片自动等比例缩小

2. 很简单我们要使用到max-width和max-height,这样即可设置对象图片最大宽度和最大高度，这样图片就会等比例缩放图片，然图片相对不变形清晰。

3. 使用max-width:300px或max-height:100px，即可解决图片比例缩小。但这样存在一个问题，如果按照宽度缩放，但图片过高会超出溢出盒子，这个时候需要对父级使用overflow:hidden隐藏超出图片内容。但是使用max-width或max-height，IE6不支持，我们需要设置个width:expression(this.width > 300 ? "300px" : this.width);或者height:e­xpression(this.height>100?"100px":this.height);。

 

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

完整代码如下

 

    
    









    

        

            ![小图片](http://upload-images.jianshu.io/upload_images/4958474-b0f8ff5d813edd7e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            ![大图片](http://upload-images.jianshu.io/upload_images/4958474-47fe7b80107cdb9a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)