css 设置固定宽高的容器中图片不变形

试了几个展示效果，最终这两个效果比较理想

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>

效果图