Css技巧：div下圖片自適應大小的解決辦法

今天，網小編的一位站長朋友在修改模板時遇到一個DIV與圖片自適應大小的問題，看了一下，這樣的問題原因很簡單，歸結就是沒有給div設置高度和寬度，那么當你設置了寬高以后也就無法自適應了，搜索了一下，找到一些解決實例，現在分享給大家：

以前的解決方法主要是利用js來實現，但用過的人都知道該辦法有點繁瑣。還有一種是在外部容器定義over-flow:hidden。但這種辦法只會切割圖片而不會自動適用。

形如：

<SCRIPT LANGUAGE="JavaScript">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.jyygyx.com/uploads/common/images/liehuo_1024x768_1.jpg" border="0" onload="changesize(this, 750);"></div><br /><center>如不能顯示效果，請按Ctrl+F5刷新本頁，更多網頁代碼：<a href='http://www.jyygyx.com/' target='_blank'>http://www.jyygyx.com/</a></center>
提示：可修改后代碼再運行!

下面的辦法的出現應該感謝偉大的css2.0和更偉大的microsoft(沒有它就不必有這么

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈