图片缩放怎么不在DIV里面进行，超出了框DIV里

HTML部分
<div class="event">
    <div class="NewsCenter">
        <div class="NewsWriting">
            <div class="NewsWritingLeft">
                <span>活动新闻</span>
                <p>event news</p>
            </div>
            <div class="NewsWritingRight">
                <p>more&rsaquo;</p>
            </div>
        </div>
        <div class="NewsPicture">
            <div class="EventLeft">
                <img src="image/newsLeft.png" />
                <h5>小福喜讯!欢迎袁女士加入小福大家庭!</h5>
                <p>2022-4-7</p>
                <p>4月7日，袁女士来到成都永丰立交外侧的航利中心沈小福总部，正式签订了加盟合同...</p>
            </div>
            <div class="EventCenter">
                <img src="image/newsCenter.png" />
                <h5>小福喜讯!欢迎袁女士加入小福大家庭!</h5>
                <p>2022-4-7</p>
                <p>4月7日，袁女士来到成都永丰立交外侧的航利中心沈小福总部，正式签订了加盟合同...</p>
            </div>
            <div class="EventRight">
                <img src="image/newsRight.png" />
                <h5>小福喜讯!欢迎袁女士加入小福大家庭!</h5>
                <p>2022-4-7</p>
                <p>4月7日，袁女士来到成都永丰立交外侧的航利中心沈小福总部，正式签订了加盟合同...</p>
            </div>
        </div>
        <img class="switchocer" src="image/switchover.png" >
    </div>
</div>
CSS
.event{
    height: 740px;
    width: 100%;
    background:url(../image/newsBackground.jpg) no-repeat;
}
.NewsCenter{
    height: 740px;
    width: 1210px;
    margin: 0 auto;
/*     background: #00FF7F; */
}
.NewsWriting{
    height: 200px;
/*     background: #ff00ff; */
}
.NewsWriting span{
    font-size: 30px;
    color: #333333;
}
.NewsWriting p{
    font-size: 14px;
    color: #999999;
}
.NewsWritingLeft{
    float: left;
    margin-top: 90px;
    text-transform: uppercase;
}
.NewsWritingRight{
    float: right;
    margin-top: 120px;
    cursor:pointer;
    text-transform: uppercase;
}
.NewsPicture{
    height: 420px;
    width: 1210px;
    /* background: #55ffff; */
}
.NewsPicture img{
    height: 250px;
    width: 390px;
    overflow: hidden;
    cursor: pointer;
    transform: all 0.6s;
}
.NewsPicture img:hover{
    transform: scale(1.2);
}
.EventLeft{
    width: 390px;
    height: 420px;
    float: left;
}
.EventCenter{
    margin-left: 20px;
    height: 420px;
    width: 390px;
    float: left;
}
.EventRight{
    height: 420px;
    width: 390px;
    float: right;
}
.NewsPicture h5{
    font-size: 16px;
    color: #333333;
    margin-top: 20px;
}
.NewsPicture p{
    margin-top: 20px;
    font-size: 14px;
    color: #999999;
}
.switchocer{
    margin: 0 auto;
    margin-top: 30px;
    cursor: pointer;
}

我想要的效果是

img

img


我的超出了DIV范围

img

img用一个div包住，然后加个overflow:hidden


<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Header</title>
    <style>
        .event{
    height: 740px;
    width: 100%;
    background:url(../image/newsBackground.jpg) no-repeat;
}
.NewsCenter{
    height: 740px;
    width: 1210px;
    margin: 0 auto;
/*     background: #00FF7F; */
}
.NewsWriting{
    height: 200px;
/*     background: #ff00ff; */
}
.NewsWriting span{
    font-size: 30px;
    color: #333333;
}
.NewsWriting p{
    font-size: 14px;
    color: #999999;
}
.NewsWritingLeft{
    float: left;
    margin-top: 90px;
    text-transform: uppercase;
}
.NewsWritingRight{
    float: right;
    margin-top: 120px;
    cursor:pointer;
    text-transform: uppercase;
}
.NewsPicture{
    height: 420px;
    width: 1210px;
    /* background: #55ffff; */
}
.imgBox{
    height: 250px;
    width: 390px;
    overflow: hidden;
}
.NewsPicture img{
    height: 250px;
    width: 390px;
    overflow: hidden;
    cursor: pointer;
    transform: all 0.6s;
}
.NewsPicture img:hover{
    transform: scale(1.2);
}
.EventLeft{
    width: 390px;
    height: 420px;
    float: left;
}
.EventCenter{
    margin-left: 20px;
    height: 420px;
    width: 390px;
    float: left;
}
.EventRight{
    height: 420px;
    width: 390px;
    float: right;
}
.NewsPicture h5{
    font-size: 16px;
    color: #333333;
    margin-top: 20px;
}
.NewsPicture p{
    margin-top: 20px;
    font-size: 14px;
    color: #999999;
}
.switchocer{
    margin: 0 auto;
    margin-top: 30px;
    cursor: pointer;
}
 
    </style>
</head>
<body>
    <div class="event">
    <div class="NewsCenter">
        <div class="NewsWriting">
            <div class="NewsWritingLeft">
                <span>活动新闻</span>
                <p>event news</p>
            </div>
            <div class="NewsWritingRight">
                <p>more&rsaquo;</p>
            </div>
        </div>
        <div class="NewsPicture">
            <div class="EventLeft">
                <div class="imgBox">
                    <img src="image/newsLeft.png" />
                </div>
                <h5>小福喜讯!欢迎袁女士加入小福大家庭!</h5>
                <p>2022-4-7</p>
                <p>4月7日，袁女士来到成都永丰立交外侧的航利中心沈小福总部，正式签订了加盟合同...</p>
            </div>
            <div class="EventCenter">
                <div class="imgBox">
                    <img src="image/newsCenter.png" />
                </div>
                <h5>小福喜讯!欢迎袁女士加入小福大家庭!</h5>
                <p>2022-4-7</p>
                <p>4月7日，袁女士来到成都永丰立交外侧的航利中心沈小福总部，正式签订了加盟合同...</p>
            </div>
            <div class="EventRight">
                <div class="imgBox">
                    <img src="image/newsRight.png" />
                </div>
                <h5>小福喜讯!欢迎袁女士加入小福大家庭!</h5>
                <p>2022-4-7</p>
                <p>4月7日，袁女士来到成都永丰立交外侧的航利中心沈小福总部，正式签订了加盟合同...</p>
            </div>
        </div>
        <img class="switchocer" src="image/switchover.png" >
    </div>
</div>
 
</div>
 
</body>
</html>

一般来讲，我们在页面展示图片的时候，为了保持图片不失帧，会在图片外部包裹一个父级div，然后 image 标签给上宽高100%，图片具体的尺寸，设置父级div即可