跨浏览器的缩略图显示

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

 

点此下载示例