在网页上如何显示一些尺寸比较大的图片的缩略图,效果如下:
原图尺寸大于 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打包:
OR