方法一：利用新属性：
object-fit: cover;
方法二：利用背景图
实际图：600px*500px
效果图：
代码：
Document
* {
margin: 0px;
padding: 0px;
}
ul,
li {
list-style-type: none;
}
.box {
width: 1200px;
margin: 30px auto;
display: table;
}
.list li {
position: relative;
float: left;
width: 300px;
height: 300px;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.list li:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border: 1px solid red;
}
三：利用transform:translate
html:
css:
.image{
position: relative;
overflow: hidden;
width: 100px;
height: 100px;
border-radius: 4px;
}
.image img{
width: auto;
height: 100%;
position: absolute;
-o-object-fit: cover;
object-fit: cover;
width: 100%;
height: auto;
min-width: 100px;
min-height: 100px;
max-width: none;
max-height: none;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
总结：
主要代码：
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
