img图片在设定的宽高中不变形而居中显示（css）
一、
<style>
.container {
width: 36.4583vw;
height: 20.8333vw;
height: 55.5556vh;
background: #cdcdcd;
margin: 0 auto;
}
.imgbox {
width: 13.0208vw;
height: 30.5556vh;
overflow: hidden;
}
img {
height: 100%;
width: auto;
left: 50%;
position: relative;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-moz-transform: translateX(-50%);
}
/* 或者 */
img {
height: auto;
width: 100%;
top: 50%;
position: relative;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
}
</style>
<div class="container">
<div class="imgbox">
<img src="./img/bg-injection1.png" alt="">
</div>
</div>
二、
<style>
.container {
width: 36.4583vw;
height: 20.8333vw;
height: 55.5556vh;
background: #cdcdcd;
margin: 0 auto;
}
.imgbox {
width: 13.0208vw;
height: 30.5556vh;
overflow: hidden;
}
img {
width: inherit;
height: inherit;
object-fit: cover;
object-position: center;
}
</style>
<div class="container">
<div class="imgbox">
<img src="./img/bg-injection1.png" alt="">
</div>
</div>
