图片在已固定宽度的DIV及TABLE中自适应

有一定web的经验的人都会了解，在固定的DIV或表格里放一张大过其宽高的图片，DIV或TABLE就会被图片撑开，使得原本精心布置好的页面被弄得一团糟。

现在有一张200*200px的图片，我们将其放在宽定义为150px的容器里［红色代表容器的边框］，演示如下：

引用代码：

<div style="border: 1px solid #f00; width: 150px;"><img src="http://www.doyoe.com/UploadFiles/20070306092825365.gif" alt="测试效果" /></div>
效果如下：



上面的效果就是正常情况下会出现的，我们发现这张图片仍是以本身大小显示的，而它的容器则被撑大了。如何让图片能够自适应容器的大小呢？

引用代码：

<div style="border: 1px solid #f00; width: 150px;"><img src="http://www.doyoe.com/UploadFiles/20070306092825365.gif" alt="测试效果" style="width: 100%;" /></div>
效果如下：



图片之所以能依据容器大小自动调整，是因为给起加了一个STYLE。STYLE里面只需要一个WIDTH，用百分比，值任意取，意思是图片的宽为容器宽的百分之多少。为何图片能自适应，就一目了然。

原文地址：http://blog.doyoe.com/article.asp?id=5