利用CSS样式:max-width实现图片等比例缩放技巧

所属栏目:DIV+CSS技巧更新时间:2014-08-25来源:作者:deepdfhy浏览:0

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

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

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


例:

网页代码:

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

CSS代码:

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


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


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

解决办法有二:

1、直接忽略万恶的IE6。

2、点击查看另一篇关于 利用CSS样式:max-width实现图片等比例缩放技巧且兼容IE6的方法

收藏 0 有帮助 0 没帮助 0 打赏 0
相关教程
给个评价吧