试了几个展示效果，最终这两个效果比较理想
1.展示全图片,图片比例不变
<style>
.imgbox {
border: 1px solid red;
position: relative;
width: 100px;
height:200px;
margin-right:100px;
float: left;
}
.imgbox img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
}
</style>
<body id="body">
<div class="imgbox">
<img src="http://mmbiz.qpic.cn/mmbiz_jpg/HjxsSHsv3C7FFH69xQUAS6aGyNzh7sJ39FudiaaumflJRmC3JTscTST4O8LKEStaKicsicsTHk9zPTCYzonjaWhmw/0?wx_fmt=jpeg">
</div>
</body>
2.居中展示图片,图片大小不变
<style>
.imgbox2{
width: 100px;
height:200px;
border: 1px solid #000;
float: left;
}
.imgbox2 i{
display: block;
width: 100px;
height: auto;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
padding-bottom: 200px;
background-color: #fff;
}
</style>
<body id="body">
<div class="imgbox2">
<i style="background-image: url('http://mmbiz.qpic.cn/mmbiz_jpg/HjxsSHsv3C7FFH69xQUAS6aGyNzh7sJ39FudiaaumflJRmC3JTscTST4O8LKEStaKicsicsTHk9zPTCYzonjaWhmw/0?wx_fmt=jpeg');"></i>
</div>
</body>
效果图
网友评论