话题 首页 > CSS3 教程 > CSS3 教程话题列表 > 详情

CSS怎么解决图片过大撑破DIV网页的问题?

精华
冯小胖是也 2016-11-17 05:38:53 浏览(17107) 回复(8) 赞(0)
不知道大家有没有到过[DIV+CSS](http://www.w3cschool.cn/search?w=DIV%252BCSS)网页内容中如果插入大于[DIV](http://www.w3cschool.cn/htmltags/tag-div.html)层宽度显示,过大的图片将会撑破网页宽度显示从而网页严重变形的问题?这有什么办法可以解决图片撑破撑开网页DIV层?
css css3

回答(8)

宇宙超级丹 精华 2016-11-17

一、防止图片撑破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层方法。

.

.

相关知识:

xiaochuan 2016-11-25

设置图片百分比

冒泡的可乐 2016-12-08

1.给图片一个具体宽和高width=100px;height=100px;或者max-width:100px;max-height=100px(这个是设置最大的宽高但是有兼容性问题,大部分还是支持的);

2.给父类一个具体宽高然后设置 overflow:hidden,但是这样图片过大只能显示部分不能够全部显示出来,可以用添加背景图片background: url("2.jpg") round;(round这个属性有兼容性问题)

代码如下

div{background: url("2.jpg") round;width: 200px;height: 200px;overflow: hidden;}

桂子旭 2017-03-07

沙发这么详细,让我还能咋说

一笔荒芜 2018-05-31

刚学习程序,过来学习学习!!!!...

1144100656 2018-05-31

大神在哪里呀,大神在哪里呀,大神在哪里呀.

1152696398 2018-05-31

快来解决啦!快来!快来! 快来 快来

要回复,请先登录 或者注册