图片缩放怎么不在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;
}

我想要的效果是

我的超出了DIV范围

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

2条回答默认最新

你好！机器人 2022-04-09 17:39

关注

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>

本回答被题主选为最佳回答 , 对您是否有帮助呢?

查看更多回答(1条)

报告相同问题？

关注问题

html css 中div的元素不在div标签内 css html5 前端有问必答
2021-07-28 11:47

回答 1 已采纳 .div_xc>div是浮动的，清除浮动就行，下面2个用其中一个就行。有帮助麻烦点个采纳【本回答右上角】，谢谢~~有其他问题可以继续交流~这样 .div_xc { paddi
鼠标移动上去div里面的部分文字变色 vue.js
2022-05-08 10:52

回答 3 已采纳因为不确定你的这个东西的布局是怎么样的，所以我写了两个可能，请题主各试一遍。若有用请点采纳谢谢对left的div标签的鼠标焦点 <style> .left:hover {
css无法改变div里面图片大小怎么办 css html
2021-10-30 12:10

回答 1 已采纳可以单独给div里面的img设置样式 div img{}
div里面放img图片出来了_img图片放在div里, div下面有多余的空白
2021-02-27 11:12

知乎生活的博客本文向大家介绍如何解决div里面img图片下方有空白的问题。首先看代码：#wrapper {border: 1px solid red;width:200px;}img {width:200px;} 运行结果为：上面代码中，div下面有一小段空白间隙，图像之下的间隙或多余...
html 怎么禁止局部缩放包括文字,图片,div html javascript 前端
2021-11-02 09:28

回答 3 已采纳思路大概是监听页面缩放比例，然后动态的改变节点的大小，来保存不论缩小或者放大你的节点保存相对不变 <script> window.addEventLi
div+css 如何在table标签里面建立二级菜单 css
2016-03-27 08:58

回答 3 已采纳 1）标签不能乱套用。 2）标签的隐藏和显示可以用css来控制。 3）ID一般是唯一的，不会重复的，对于一个标签来说，就只有一个ID；而CLASS可以是重复，一个标签可以有多个CLASS。如果一个标
如何在一个div里上传图片，并显示在当前div的另一处 java
2016-11-13 04:09

回答 3 已采纳帮你写了个，望采纳 ``` 这里显示图片 ```
div中一个图片怎么铺满整个div而且不超出div按比例铺满div
2023-12-13 14:19

fury_123的博客重要信息: background-size:cover或者background-size:contain;属性设置图片不重复: background-repeat:no-repeat; 设置字体在div中间:
div中设置input搜索框，搜索框垂直方向不居中，且盖住了div的下边框 css3 html 前端
2022-08-20 21:54

回答 3 已采纳你可以参考下这篇文章：div中input垂直居中的方法
怎样使p标签水平垂直居中在div 盒子里 css html5 javascript
2022-04-14 20:15

回答 1 已采纳已知父元素高度时，子元素行高等于父元素高度即可；未知父元素高度时，使用固定定位/绝对定位 + transform + translate；或者使用弹性布局 display：flex; .title
div里图片和文字同时存在的布局问题,谢谢了 css html5
2015-07-13 03:56

回答 4 已采纳因为img和span都是行内元素，外边距是影响整块内容的。如果只想移动img，可以给img加上如下样式： img{ position: relative; top: 10px;} 就可以了
div里面一个img标签，按最大边缩放的不变形、不超出、上下左右居中的解决办法
2019-11-09 11:07

lukaifang的博客 div里面一个img标签的不变形、不超出、上下左右居中的解决办法这段时间做一个比较简单的小项目，当中有一个图片展示的页面，当我把数据图片展示到前端的时候，发现前端小姐姐写的css样式有点小小的问题，就是我从...
在HTML中，设置div背景图片无法显示完全该怎么办？ html5
2021-10-16 17:13

回答 2 已采纳遇到什么问题了呢。background-size就是调整背景大小
图片铺满div元素不变形，超出部分隐藏，保留中心部分css代码
2022-08-10 11:08

二进制女猿的博客需求：图片铺满父级元素，有些图片横向、有些是纵向，图片宽高比不一致，导致不能铺满或者变形。针对这种情况，需要以图片中心位置向四周铺满父级。转自：https://www.cnblogs.com/ymdi/p/15707504.html。object-fit...
图片溢出div，超出div解决办法
2018-07-07 10:14

Harriet嘉的博客当我的图片宽度大小没有设置，过大的时候，它会超出我的div宽度。这个时候，我给它设置了一个小于我的div的宽度，它是可以进入div盒子而不溢出的，然而，当我们的浏览器缩小的时候，我的div是栅格布局，固定了百分比...
没有解决我的问题, 去提问