css图片过大,CSS解决图片过大撑破DIV的方法

一、防止图片撑破DIV方法一

原始处理方法是将要展示的图片进行处理。比如你的DIV宽度为500px(像素),那你上传的图片或放入 页的图片宽度就要小于500px,也就是你图片需要图片软件剪切、等比例缩小方法处理后再上传、放入 页中解决撑破撑开DIV问题。

二、防止图片撑开DIV方法二

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

三、解决方法三

对图片img标签中只加入宽度即可解决。这样可以等比例缩小图片,不会影响图片画面质量。

比如你的 页DIV宽度为500px,那你上传图片后对img标签设置width等于500以下即可。

对应CSS代码:.divcss5 img{width:宽度值+单位}

五、CSS解决图片撑破撑开DIV方法五

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

六、解决图片撑破DIV层方法总结与推荐

1)、最大宽度(max-width)+overflow:hidden。我们这样设置可以让IE6版本以上浏览器支持最大宽度样式,也让IE6下隐藏图片超出宽度而撑开DIV得到解决,此方法比较方便和实用。

2)、只使用overflow:hidden属性,如方法二

3)、图片使用上传时候软件处理下,以适应DIV布局宽度,如方法一

相关资源:抖音最近很火的直播,挤地铁源码软件教程_抖音虚拟人物直播代码…

声明:本站部分文章及图片源自用户投稿,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2021年7月2日
下一篇 2021年7月3日

相关推荐