借助CSS解决大图片撑破网页的问题

如果图片过大就有可能撑破网页,打开页面后看起来会特别乱,而且还会出现遮盖部分文字的现象,影响用户的体验。

图片撑破布局原因文章源自堕落的鱼-https://www.duoluodeyu.com/852.html

1、由于浏览器版本低(微软IE6)文章源自堕落的鱼-https://www.duoluodeyu.com/852.html

2、没有设置div布局的宽度文章源自堕落的鱼-https://www.duoluodeyu.com/852.html

解决图片超出宽度或撑破div css布局方法:文章源自堕落的鱼-https://www.duoluodeyu.com/852.html

可以通过对图片设置最宽css可以使用max-width来设置,但是IE6不支持,但是可以使用浏览器的css hack来设置代码如下(viewbox是对应的父级目录)文章源自堕落的鱼-https://www.duoluodeyu.com/852.html

.viewbox img{ max-width:600px;_width:600px;}文章源自堕落的鱼-https://www.duoluodeyu.com/852.html

说明:通过其他浏览器不支持带“_”的css,但是IE6支持。刚好可以通过此css
hack来实现对图片宽度的现在。这里只能克服IE6显示固定的宽度来符合其它版本的兼容性。文章源自堕落的鱼-https://www.duoluodeyu.com/852.html 文章源自堕落的鱼-https://www.duoluodeyu.com/852.html

 最后更新:2015-7-1
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
确定

拖动滑块以完成验证