7.2日音讯,css对图片的几点用法详解。在网页内容中如果插入大于DIV层宽度显示，过大的图片将会撑破网页宽度显示从而网页严重变形，您是否遇到过？这里邯郸首创网络来给大家介绍几种解决图片撑破撑开网页DIV层方法。图片撑破宽度解决方法、CSS设置div层宽度图片大于设置div宽度后撑破div固定宽度解决方法方案，隐藏图片超出撑破宽度方法。
解决图片撑破DIV层方法总结与推荐
一、防止图片撑破DIV方法一-TOP
原始处理方法是将要展示的图片进行处理。比如你的DIV宽度为500px（像素），那你上传的图片或放入网页的图片宽度就要小于500px，也就是你图片需要图片软件剪切、等比例缩小方法处理后再上传、放入网页中解决撑破撑开DIV问题。
常见很多大型图片站点、新闻站点都是将照片图片进行处理适应网页宽度情况下，进行图片编辑处理的。
二、防止图片撑开DIV方法二-TOP
如果不处理照片方法适应DIV有限宽度，那可以对DIV设置隐藏超出内容方法。只需要对DIV设置宽度后加入CSS样式“overflow:hidden”即可解决隐藏图片比DIV过宽部分解决撑破DIV问题。
三、解决方法三-TOP
对图片img标签中只加入宽度即可解决。这样可以等比例缩小图片，不会影响图片画面质量。
比如你的网页DIV宽度为500px，那你上传图片后对img标签设置width等于500以下即可。
<imgsrc="图片路径"width="小于你的DIV宽度"/>即可解决图片过宽导致DIVSPAN撑破，这样好处可以等比例放大缩小图片。
四、CSS解决撑破方法四-TOP
这种方法使用CSS直接对div内的img进行宽度设置，这样不好是如果图片过小会影响网页浏览图片时候效果。
Div结构：<divclass="img"><imgsrc="图片路径"/></div>
对应CSS代码：.divcssimg{width:宽度值+单位}
五、CSS解决图片撑破撑开DIV方法五-TOP
使用max-width（最大宽度），比如你DIV宽度为500px，那你对应DIV样式再加入最大宽度CSS样式“max-width="500px"”即可解决，但是在IE6浏览器不兼容此属性，谨慎使用。
六、解决图片撑破DIV层方法总结与推荐-TOP
1）、最大宽度（max-width）+overflow:hidden。我们这样设置可以让IE6版本以上浏览器支持最大宽度样式，也让IE6下隐藏图片超出宽度而撑开DIV得到解决，此方法比较方便和实用。
2)、只使用overflow:hidden属性，如方法二
3）、图片使用上传时候软件处理下，以适应DIV布局宽度，如方法一
以上为推荐解决IMG图片撑破有限DIV宽度方法，根据实际情况大家可以任意选择适合自己解决网页中图片撑破DIV层方法。
CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法
平时我们布局时候，有的文字内容多了会超过溢出我们限制的高度，有的图片会撑破DIV，让网页错位变乱。
这样我们就需要解决如何使用CSS来超出设置CSS宽度和CSS高度的内容自动隐藏掉，又不撑破DIV布局。
特别是在IE6，如果内容超出对象高度和宽度承载，将会被撑破增高，这个时候我们可以利用以下解决方法。
一、解决CSS样式-TOP
这时我们可以使用CSSoverflow样式解决：
对应样式overflow:hidden
Div{overflow:hidden}
这样设置后，假如DIV对象设置一定宽度高度，此时加入overflow:hidden将会隐藏超出DIV宽度高度的内容包括图片。
相关阅读：css实现溢出超出文字内容显示省略号
二、隐藏超出内容案例-TOP
1、隐藏超出对象宽度高度文字内容
假如我们在一个布局中为了美观对齐，有时我们需要设置了对象高宽后就固定了，这个时候需要实现无论多少内容文字都不要超出设置宽度高度布局，这个时候我们需要overflow:hidden帮忙。
CSS代码：
<style>
.divcss5{width:300px;height:50px;line-height:25px;overflow:hidden}
/*设置对象高度宽度，同时设置overflow:hidden*/
</style>
Html代码：
<divclass="divcss">欢迎来到首创网络，
在这里你可以学习CSS同时也可以下载需要的资源，
同时可以找到自己常见问题答案</div>
隐藏多余文字内容方法案例截图
CSS隐藏溢出内容方法示范截图
这样设置了overflow:hidden无论多少内容都会隐藏对象设置宽度和高度以外装不下的内容。
2、隐藏超出对象宽度的图片部分案例
这里设置一个一定CSS宽度和CSS高度的对象盒子，放一个大的图片，然后使用overflow:hidden隐藏其超出部分。
Css代码
<style>
.divcss5{width:300px;height:50px;line-height:25px;overflow:hidden}
/*设置对象高度宽度，同时设置overflow:hidden*/
