程序员人生网站导航

图片自适应大小,超出部分自动隐藏缩略

栏目：htmlcss时间：2014-05-22 05:41:54

　　在制作网站布局中，图片的自适应功能是一个非常重要的功能，一般的用处是来防止图片撑开容器而对图片的尺寸进行必要的控制。有一个比较简单的方法来实现：

　　max-width:600px; IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。

　　width:600px; 在所有浏览器中图片的大小为600px;

　　当图片大小大于600px，自动缩小为600px。在IE6中有效。

　　overflow:hidden; 超出的部分隐藏，避免控制图片大小失败而引起的撑开变形。

<html><head><title>自适应大小的方法 - Liehuo.Net</title><style>#tupian img {max-width:600px;width:600px;width:expression(document.body.clientWidth>600?"600px":"auto");overflow:hidden;}</style></head><body><div id="tupian"><img src="/uploads/common/images/liehuo_1024x768_3.jpg"></div><br />这是一个1024x768的图片。</body></html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

------分隔线----------------------------

上一篇 简单高效的javascript 幻灯片播放效果

下一篇 IIS环境无法显示中文名称图片的解决方法

------分隔线----------------------------