跨浏览器的缩略图显示

平常经常需要将图片按比例显示在一个定高和定宽的容器中，由于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>

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;}

主要是设定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;}

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;}

 

点此下载示例