方法一:
.imgbox{
position: relative;
width: 240px;
height: 240px;
}
.imgbox img{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
outline: 1px solid #000;
}
说明:imgbox为放置图片的容器,高度和宽度可以设置为任意需要的大小,容器中的图片为绝对定位,使用top-bottom-left-right-margin使其居中。使用max-width和max-height使图片比容器大时也能正常显示。
方法二:
.imgbox{
font-size: 0;
width: 240px;
height: 240px;
line-height: 240px;
text-align: center;
}
.imgbox img{
max-height: 100%;
max-width: 100%;
vertical-align: middle;
outline: 1px solid #000;
}
说明:对容器设置font-size:0,消除img下多出的3px,防止居中出现偏差。outline可有可无,我是为了清晰显示图片位置才声明的outline。
效果图:(最后两个图片width/height大于容器,均能正常显示)
案例代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style type="text/css" media="screen">
li{
list-style: none;
float: left;
}
.imgbox{
position: relative;
width: 100px;
height: 100px;
border: 1px solid gray;
margin: 5px;
border-radius: 3px;
}
.imgbox img{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
outline: 1px solid #000;
}
</style>
</head>
<body>
<ul>
<li class="imgbox"><img src="img/house.jpg"></li>
<li class="imgbox"><img src="img/img_layer.jpeg"></li>
<li class="imgbox"><img src="img/house.jpg"></li>
<li class="imgbox"><img src="img/img_layer.jpeg"></li>
<li class="imgbox"><img src="img/house.jpg"></li>
<li class="imgbox"><img src="img/img_layer.jpeg"></li>
<li class="imgbox"><img src="img/house.jpg"></li>
<li class="imgbox"><img src="img/img_layer.jpeg"></li>
<li class="imgbox"><img src="img/house.jpg"></li>
<li class="imgbox"><img src="img/img_layer.jpeg"></li>
<li class="imgbox"><img src="img/house.jpg"></li>
<li class="imgbox"><img src="img/img_layer.jpeg"></li>
</ul>
</body>
</html>
效果图如下: