关于文章里面图片尺寸太大撑开网页的解决方法

在制作网页时,常常会出现,文章内容里插入的图片尺寸过大,从而撑开网页布局或者超出部分被隐藏。

一流资源网之前有分享过几篇关于利用JS来实现,图片按指定宽度或者高度等比例缩放的代码,

这里则分享的是纯CSS的方法实现这个效果:

例:

网页代码:

1
<div class="article"><img src="images/suqitechcss.jpg" />

CSS代码:

1
2
.article {width:500px}
.article img {max-width:500px}


max-width 就是最大宽度的意思,设置图片最大宽度是500px,图片真实尺寸如果超过500px,就会自动缩放到 500px,高度也会等比例缩放。


但是,有个缺点,IE6不支持 max-width 

但是,有个缺点,IE6不支持 max-width 

解决办法有二:

1、直接忽略万恶的IE6。

网页代码:

1
<div class="article"><img src="images/16css.jpg" />div>

CSS代码:

1
2
.article {width:750px;}
.article img {max-width:100%width:expression(this.width > 750 "750px" : this.width); max-height:5000pxheight:expression(this.height > 5000 "5000px" : this.height);}


其中的   750 就是最大宽度,,,5000就是最大高度。

 

杭州SEO_杭州网站优化_杭州SEM托管|雨墨营销 ,版权所有丨如未注明,均为原创,转载请注明本文固定链接
喜欢 ()or分享