如何使多个不同比例的图片,上下水平居中
方法一:
给 a 标签设置背景图片
<!DOCTYPE html>
<html>
<head>
<title>多个不同比例图片上下水平居中</title>
<style type="text/css">
ul{
margin: 0 auto;
padding:0;
list-style-type: none;
width: 930px;
overflow: hidden;
}
ul li{
width: 300px;
height: 300px;
background: gray;
float:left;
display:table;
text-align: center;
margin-right: 10px;
}
ul li a{
display: table-cell;
}
ul .one a{
background: url("img/one.jpg") center center no-repeat;
background-size: contain;
}
ul .two a{
background: url("img/two.jpeg") center center no-repeat;
background-size: contain;
}
ul .three a{
background: url("img/three.jpg") center center no-repeat;
background-size: contain;
}
</style>
</head>
<body>
<ul>
<li class="one">
<a href="###"></a>
</li>
<li class="two">
<a href="###"></a>
</li>
<li class="three">
<a href="###">
</a>
</li>
</ul>
</body>
</html>
方法二:
给 a 标签包裹一个img标签
<!DOCTYPE html>
<html>
<head>
<title>多个不同比例图片上下水平居中</title>
<style type="text/css">
ul{
margin: 0 auto;
padding:0;
list-style-type: none;
width: 930px;
overflow: hidden;
}
ul li{
width: 300px;
height: 300px;
background: gray;
float:left;
text-align: center;
margin-right: 10px;
overflow: hidden;
}
ul li a{
display: table-cell;
vertical-align: middle;
}
ul li div{
display: table;
width: 300px;
height: 300px;
text-align: center;
}
ul li .two{
margin:0 10px;
}
ul li img{
max-width: 300px;
max-height: 300px;
}
</style>
</head>
<body>
<ul>
<li class="one">
<div>
<a href="###">
<img src="img/one.jpg">
</a>
</div>
</li>
<li class="two">
<div>
<a href="###">
<img src="img/two.jpeg">
</a>
</div>
</li>
<li class="three">
<div>
<a href="###">
<img src="img/three.jpg">
</a>
</div>
</li>
</ul>
</body>
</html>
实现效果: