Css能力：div下图片自顺应巨细的办理步伐

发布时间：2018-10-06 07:12:31 所属栏目：创业来源：站长网

导读：本日，猛火网小编的一位站长伴侣在修改模板时碰着一个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.

（编辑：河北网）

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

首富马斯克谈成功？他	从先行者到制定者，轻
中国互联网的新一轮机	马斯克想辞职做专业网