一、防止图片撑破DIV方法——缩小图片尺寸
原始处理方法是将要展示的图片进行处理。比如你的DIV宽度为500px（像素），那你上传的图片或放入网页的图片宽度就要小于500px，也就是你图片需要图片软件剪切、等比例缩小方法处理后再上传、放入网页中解决撑破撑开DIV问题。常见很多大型图片站点、新闻站点都是将照片图片进行处理适应网页宽度情况下，进行图片编辑处理的。
二、防止图片撑开DIV方法——隐藏超出内容
如果不处理照片方法适应DIV有限宽度，那可以对DIV设置隐藏超出内容方法。只需要对DIV设置宽度后加入CSS样式“overflow:hidden”即可解决隐藏图片比DIV过宽部分解决撑破DIV问题。
三、CSS解决撑破解决方法——img标签添加宽度参数
对图片img标签中只加入宽度即可解决。这样可以等比例缩小图片，不会影响图片画面质量。比如你的网页DIV宽度为500px，那你上传图片后对img标签设置width等于500以下即可。
<img src="图片路径" width="小于你的DIV宽度" />
即可解决图片过宽导致DIV SPAN撑破，这样好处可以等比例放大缩小图片。
四、CSS解决撑破方法——CSS直接对div内的img进行宽度设置
这种方法使用CSS直接对div内的img进行宽度设置，这样不好的是如果图片过小会影响网页浏览图片时候的效果。Div结构：
<div class="W3Cschool"><img src="图片路径" /></div>
对应CSS代码：
. W3Cschool img{width:宽度值+单位}
五、CSS解决图片撑破撑开DIV方法——使用max-width（最大宽度）
使用max-width（最大宽度），比如你DIV宽度为500px，那你对应DIV样式再加入最大宽度CSS样式“max-width="500px" ”即可解决，但是在IE6浏览器不兼容此属性，谨慎使用。
六、解决图片撑破DIV层方法总结与推荐
1）、最大宽度（max-width）+overflow:hidden。我们这样设置可以让IE6版本以上浏览器支持最大宽度样式，也让IE6下隐藏图片超出宽度而撑开DIV得到解决，此方法比较方便和实用。
2）、只使用overflow:hidden属性，如方法二
3）、图片使用上传时候软件处理下，以适应DIV布局宽度，如方法一以上为推荐解决IMG图片撑破有限DIV宽度方法，根据实际情况大家可以任意选择适合自己解决网页中图片撑破DIV层方法。
引用原网址：https://www.w3cschool.cn/css3/question-10231627.html
标签：撑破,宽度,解决,DIV,CSS,图片 From： https://www.cnblogs.com/sherlock-V/p/16937228.html