SOURCE

console 命令行工具 X clear

                    
>
console
//图片自适应居中
$('.imgList img').each(function (index) {
    $(this).load(function () {
        var ratioT = $(this).width()/$(this).height();  //初始图片的宽高比
        var ratioP = $(this).parent().width()/$(this).parent().height();  //图片容器的宽高比
        if ( ratioT <= ratioP ) {
            $(this).css('width','100%');
        } else {
            $(this).css('height','100%');
        }
    })
})
<ul class="imgList">
  <li><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1471875068,460028752&fm=27&gp=0.jpg"></li>
  <li><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2135081425,1184147071&fm=27&gp=0.jpg"></li>
  <li><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4290186613,4062719990&fm=27&gp=0.jpg"></li>
  <li><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3174953969,787936730&fm=11&gp=0.jpg"></li>
  <li><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3572698774,3231888075&fm=27&gp=0.jpg"></li>
</ul>
.imgList{
	display: flex;
	justify-content:flex-start;
	margin: 10px 0;
}
.imgList li{
	width: 110px;
	height: 95px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	margin-right: 8px;
}