CSS练习-图片缩略图

 

在网页上如何显示一些尺寸比较大的图片的缩略图，效果如下：

 

 

原图尺寸大于 480*640(wedth*height),缩略图尺寸为小于180*220(wedth*height)

 

CSS文档：

@charset"utf-8";

body {

         background-color: #66F;

}

body,#main,h5,ul,li,a,img{

         margin: 0;

         padding: 0;

}

#main {

         background-color: #9FF;

}

#main ul{

         list-style-type: none;

}

#main ul li{

         float:left;

         display: inline;

         padding: 5px;

         width: 180px;

         height: 220px;

         text-align:center;

}

#main ul li a{

         display:inline;

         text-decoration:none;

}

img{

         max-width: 90%;

         max-height: 90%;

}

#main ul li a img{

    border-color: #E1;

         border-style:solid;

         border-width:3px;

}

#main ul lia:hover img{

         border-color: #F00;

         border-style:solid;

         border-width:3px;

}

h5{

         position:relative;

}

 

这里使用CSS的一对属性max-width,max-height

 

IE9和chrome R14 通过

 

HTML与CSS打包：

 http://115.com/file/e6vlwbho

OR

http://download.csdn.net/detail/les5332295/3653628