代码如下:
- 在img元素外面包裹一层div与img元素等宽等高,设置绝对定位,并相对于外层div居中
- 在包裹img元素的div外面再套一层div,宽高为需要展示的宽高,设置超出部分隐藏
<div class="wrapper">
<div class="imgwrapper">
<img src="./img/a1.png" alt="">
</div>
</div>
<style>
.wrapper {
width: 395px;
height: 237px;
position: relative;
overflow: hidden;
margin: 0 auto;
}
.wrapper .imgwrapper {
width: 790px;
height: 475px;
position: absolute;
top: 50%;
height: 50%;
margin-left: -215px;
margin-top: -270.5px
}
img {
width: 790px;
height: 475px;
}
</style>
效果图: