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

发布时间：2018-09-18 08:30:52 所属栏目：经验来源：站长网

导读：在制作网站布局中，图片的自适应功能是一个非常重要的功能，一般的用处是来防止图片撑开容器而对图片的尺寸进行必要的控制。有一个比较简单的方法来实现： max-width:600px; IE7、FF等其他非 IE浏览器下最大宽度为600px。但在IE6中无效。 width:600px; 在

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

　　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.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：我爱制作网_潮州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!