尺寸不固定的图片在div中垂直居中并完全显示

前几天做一个项目，需要批量上传图片，图片外侧div尺寸固定；由于图片是用户输入的，所以大小存在不确定性，产品需求是无论图片尺寸多大，都要垂直居中完全显示

废话不多说，直接上代码

html

　　<ul>
        <li>
            <img src="pics/1.jpg" alt=""/>
        </li>
        <li>
            <img src="pics/2.jpg" alt=""/>
        </li>
    </ul>

css

*{padding:0px;margin:0px;list-style: none;}
a img{border:;}
li{
    position: relative;
    left:100px;
    top:100px;
    width:300px;
    height:200px;
    border: solid 1px red;
    overflow: hidden;
}
img{
    position: absolute;
    margin: auto;
    top: -9999px;
    right: -9999px;
    bottom: -9999px;
    left: -9999px;
    max-width:100%;
    max-height:100%
}  

结果