Css技巧：div下图片自适应大小的解决办法

发布时间：2018-10-07 01:09:23 所属栏目：经验来源：站长网

导读：今天，烈火网小编的一位站长朋友在修改模板时遇到一个DIV与图片自适应大小的问题，看了一下，这样的问题原因很简单，归结就是没有给div设置高度和宽度，那么当你设置了宽高以后也就无法自适应了，搜索了一下，找到一些解决实例，现在分享给大家：以前的解

今天，烈火网小编的一位站长朋友在修改模板时遇到一个DIV与图片自适应大小的问题，看了一下，这样的问题原因很简单，归结就是没有给div设置高度和宽度，那么当你设置了宽高以后也就无法自适应了，搜索了一下，找到一些解决实例，现在分享给大家：

以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。

形如：

<SCRIPT LANGUAGE="<b>Java</b>Script"> function imgSize(url ,id) { var imgObj = new Image(); var imgDiv=document.getElementById(id) imgObj.src = url; imgDiv.innerHTML= imgObj.width + " × " + imgObj.height; } function changeSize(obj, width) { if (obj.width > width) { obj.width=width; } } </SCRIPT> <style type="text/css"> body { font-size: 12px; text-align: center; margin: 0px; padding: 0px; } #pic{ margin:0 auto; width:100%; padding:0; } #pic img{ max-width:758px; myimg:expression( onload=changeSize(this, 758) ); } </style> <div id="pic"> <img src="http://www.veryhuo.com/uploads/common/images/liehuo_1024x768_1.jpg" border="0" onload="changesize(this, 750);"> </div><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

下面的办法的出现应该感谢伟大的css2.0和更伟大的microsoft(没有它就不必有这么啰嗦的代码了^_^)。本人仅在ie6.0,ff1.5,opera7.0于winXP下测试通过，希望通过此篇文章抛砖引玉，望更多高手指点。关键在于：max-width:780px;以及下面那行。

固定像素适应：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Css技巧：div下图片自适应大小的解决办法</title> <style type="text/css">  </style> </head> <body> <div id="pic"> <img src="http://www.veryhuo.com/uploads/common/images/liehuo_1024x768_1.jpg" alt="veryhuo.com"/> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

按百分比适应：

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Css技巧：div下图片自适应大小的解决办法</title> <style type="text/css">  </style> </head> <body> <div id="pic"> <img src="http://www.veryhuo.com/uploads/common/images/liehuo_1024x768_1.jpg" alt="烈火学院VeryHuo.COM"/> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

提醒:

1 该方法不只是用于img;
2 max-width,max-height,min-width,min-height.

（编辑：威海站长网）

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

元宇宙大爆炸，虚拟偶	从科教大市迈向科创强
摩尔线程首颗国产全功	安徽省博士后创新创业