用CSS控制图片自适应大小

您现在的位置： PS资源站 >> 设计学院 >> 网站设计 >> DivCSS教程 >> 教程正文

用CSS控制图片自适应大小

热 ★★★

【字体：小大】

用CSS控制图片自适应大小

作者：佚名教程来源：不详点击数：更新时间：2008-1-26

　　图片自动适应大小是一个非常常用的功能，在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制，我们可不可以用CSS控制图片使它自适应大小呢？

　　我们想到了一个比较简单的解决方法，虽然不是非常的完美，如果您的要求不是非常高，已经可以满足你的需要了。我们看下面的代码：

以下是代码片段：

div img {
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}

　◎ max-width:600px; 在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。
　◎ width:600px; 在所有浏览器中图片的大小为600px;
　◎ 当图片大小大于600px，自动缩小为600px。在IE6中有效。
　◎ overflow:hidden; 超出的部分隐藏，避免控制图片大小失败而引起的撑开变形。

教程录入：onegreen 责任编辑：onegreen

上一篇教程： CSS网页布局兼容性的要点与诀窍

下一篇教程： div+css网页布局中合理的运用html标签

【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

最新热点		最新推荐		相关文章
				五款符合WEB标准的纯div+css弹出菜单 Adobe Illustrator CS2画可爱的小鸟体验Adobe Flash CS3新特性 FrontPage 2003教程如何在Frontpage20 教你用CorelDRAW制作卷页效果 Vray 焦散 caustics 設定 Illustrator CS模板应用巧用CorelDRAW 11制作足球飞翔效果巧用CorelDRAW软件制作具有三维效果的折 Dreamweaver CS3 最新功能描述