img元素实现图片裁切放大

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_41847321/article/details/98471776

代码如下： 

1. 在img元素外面包裹一层div与img元素等宽等高，设置绝对定位，并相对于外层div居中
2. 在包裹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>

 效果图：