常见很多大型图片站点、新闻站点都是将照片图片进行处理适应网页宽度情况下,进行图片编辑处理的。
二、防止图片撑开DIV方法二
如果不处理照片方法适应DIV有限宽度,那可以对DIV设置隐藏超出内容方法。只需要对DIV设置宽度后加入CSS样式“overflow:hidden”即可解决隐藏图片比DIV过宽部分解决撑破DIV问题。
三、解决方法三
对图片img标签中只加入宽度即可解决。这样可以等比例缩小图片,不会影响图片画面质量。
比如你的网页DIV宽度为500px,那你上传图片后对img标签设置width等于500以下即可。
即可解决图片过宽导致DIV SPAN撑破,这样好处可以等比例放大缩小图片。
四、CSS解决撑破方法四
这种方法使用CSS直接对div内的img进行宽度设置,这样不好是如果图片过小会影响网页浏览图片时候效果。
对图片设置:max-height:500px
max-width:500px
或者你设置单元格div 或者 overflow:hidden
<div id="img" style="height: 600pxwidth: 1000pxoverflow:auto">
<img scr="" />
</div>
在外层的div固定宽高,里面的img如果你要宽度铺满如 <div style="width:150height:200pxoverfloat:hidden"><img style="width:100%"/></div>
如果想图片高度铺满 <img style="height:100%"/>但是这样图片就不能完整显示
如果你的图片都是一样的尺寸,div设置相同比例 , <img style="width:100%height:100%"/>