您现在的位置是:首页 >>CssCss

div 如何防止图片太大被撑开

zhang2020-11-19 15:23:22【Css】人已围观

简介:
方法一:原始处理方法是将要展示的图片进行处理。比如你的DIV宽度为550px(像素),那你上传的图片或放入网页的图片宽度就要小于500px,也就是你图片需要图片软件剪切、等比例缩小方法处理后再上传、放...


方法一:
原始处理方法是将要展示的图片进行处理。比如你的DIV宽度为550px(像素),那你上传的图片或放入网页的图片宽度就要小于500px,也就是你图片需要图片软件剪切、等比例缩小方法处理后再上传、放入网页中解决撑破撑开DIV问题。
常见很多大型图片站点、新闻站点都是将照片图片进行处理适应网页宽度情况下,进行图片编辑处理的。

方法二:
如果不处理照片方法适应DIV有限宽度,那可以对DIV设置隐藏超出内容方法。只需要对DIV设置宽度后加入CSS样式“overflow:hidden”即可解决隐藏图片比DIV过宽部分解决撑破DIV问题。

方法三:
对图片img标签中只加入宽度即可解决。这样可以等比例缩小图片,不会影响图片画面质量。
比如你的网页DIV宽度为500px,那你上传图片后对img标签设置width等于500以下即可。
<img src="图片路径" width="小于你的DIV宽度" />即可解决图片过宽导致DIV SPAN撑破,这样好处可以等比例放大缩小图片。

方法四:
这种方法使用CSS直接对div内的img进行宽度设置,这样不好是如果图片过小会影响网页浏览图片时候效果。
Div结构:<div class="divcss5"><img src="图片路径" /></div>
对应CSS代码:.divcss5 img{width:宽度值+单位}

方法五:
使用max-width(最大宽度),比如你DIV宽度为500px,那你对应DIV样式再加入最大宽度CSS样式“max-width="500px"”即可解决,但是在IE6浏览器不兼容此属性,谨慎使用。

总结:
1、最大宽度(max-width)+overflow:hidden。我们这样设置可以让IE6版本以上浏览器支持最大宽度样式,也让IE6下隐藏图片超出宽度而撑开DIV得到解决,此方法比较方便和实用。(IE6是做DIV+CSS最头痛的事了)
2、只使用overflow:hidden属性,如方法二
3、图片使用上传时候软件处理下,以适应DIV布局宽度,如方法一




上一篇:给span设置宽和高

下一篇:@media 查询

文章评论

    评论加载中...

标签云

站点信息

  • 建站时间:2018-11-17
  • 文章统计:98篇文章
  • 微信交流:扫描二维码,添加我
在线客服
在线客服
在线咨询:
点击这里给我发消息技术交流
点击这里给我发消息技术交流
点击这里给我发消息技术交流
电话咨询:
(微信同步)
15629136039
微信公众号