跨浏览器的缩略图显示
平常经常需要将图片按比例显示在一个定高和定宽的容器中，由于ie对很多CSS属性的不支持，有些时候不得不用到js。这里介绍一个方法，在各种浏览器上都能比较完美的将图片显示在定高定宽的容器中。
对于这样一个缩略图列表的html
<ul>
<li>
<a href="javascript:void(0);">
<img src="too-high.jpg" alt="too high" />
</a>
</li>
<li>
<a href="javascript:void(0);">
<img src="too-small.jpg" alt="too small" />
</a>
</li>
<li>
<a href="javascript:void(0);">
<img src="too-wide.jpg" alt="too wide" />
</a>
</li>
</ul>
<li>
<a href="javascript:void(0);">
<img src="too-high.jpg" alt="too high" />
</a>
</li>
<li>
<a href="javascript:void(0);">
<img src="too-small.jpg" alt="too small" />
</a>
</li>
<li>
<a href="javascript:void(0);">
<img src="too-wide.jpg" alt="too wide" />
</a>
</li>
</ul>
1、在支持max-width和max-height的浏览器（包括ie7和ie8）中，可以如下方式显示图片：
ul{margin:0px;padding:0px;list-style:none;}
li{margin:5px;float:left;border:solid 1px #CCCCCC;text-align:center;}
li a{display:block;width:100px;height:100px;padding:2px;}
li a:hover{background:#FCFCFC;}
img{max-height:100px;max-width:100px;border:none;}
li{margin:5px;float:left;border:solid 1px #CCCCCC;text-align:center;}
li a{display:block;width:100px;height:100px;padding:2px;}
li a:hover{background:#FCFCFC;}
img{max-height:100px;max-width:100px;border:none;}
主要是设定img标签的max-height和max-width属性，以达到缩略图的按比例缩小的目的。
2、但是在ie6中就没这么简单了，为了不动用js，只好舍弃一点效果，对于任何图片，设置为一样的宽度，如果高度超过容器高度，那么将容器的overflow设置为hidden来将多出的高度隐藏，这样图片内容的比例不会改变。虽然有可能不能完全看到图片的整个缩略图，但是缩略图都很好的放在了容器中。 CSS代码如下（html代码不变）：
ul{margin:0px;padding:0px;list-style:none;}
li{margin:5px;float:left;border:solid 1px #CCCCCC;text-align:center;}
li a{display:block;width:100px;height:100px;margin:2px;overflow:hidden;}
li a:hover{background:#FCFCFC;}
img{width:100px;border:none;}
li{margin:5px;float:left;border:solid 1px #CCCCCC;text-align:center;}
li a{display:block;width:100px;height:100px;margin:2px;overflow:hidden;}
li a:hover{background:#FCFCFC;}
img{width:100px;border:none;}
3、跨浏览器的方案如下（html代码不变）：
ul{margin:0px;padding:0px;list-style:none;}
li{margin:5px;float:left;border:solid 1px #CCCCCC;text-align:center;}
li a{display:block;width:100px;height:100px;margin:2px;overflow:hidden;}
li a:hover{background:#FCFCFC;}
img{max-height:100px;max-width:100px;width:auto !important;*width:100px;border:none;}
li{margin:5px;float:left;border:solid 1px #CCCCCC;text-align:center;}
li a{display:block;width:100px;height:100px;margin:2px;overflow:hidden;}
li a:hover{background:#FCFCFC;}
img{max-height:100px;max-width:100px;width:auto !important;*width:100px;border:none;}
