Html 如何在不移动其他元素的情况下在div中使用image

我正在使用flex box，我正在努力使我的网站具有响应性。现在我需要在黄色的div里放一个图像，但是当我这样做的时候，所有的结构变化都会导致这个。我试着在宽度和高度上打球，但我能做到。希望你们中的一个能帮我

：根目录{
--主色：#0077be；
}
身体{
字体系列：“开放式Sans”，无衬线；
文本对齐：右对齐；
}
ul，
李{
列表样式：无；
填充：0；
保证金：0；
}
div{
边框：1px纯色灰色；
}
.屏幕{
填充：100px；
背景色：#ededed；
高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.包装纸{
宽度：1200px；
高度：450px；
背景色：#fff；
显示器：flex；
弯曲方向：立柱；
}
.章节标题{
柔性生长：1；
}
.新闻发言人{
弹性增长：11；
显示器：flex；
弯曲方向：立柱；
填充：17px；
}
.主要新闻{
弹性增长：11；
显示器：flex；
弯曲方向：行反向；
}
.足部新闻{
柔性生长：1；
}
.对{
弹性增长：7；
显示器：flex；
弯曲方向：行反向；
左边距：20px；
}
.左{
弹性增长：10；
显示器：flex；
弯曲方向：立柱；
}
.img{
最大高度：100%；
溢出：隐藏；
}
.img img{
最大宽度：100%；
最小高度：100%；
}
.info{
柔性生长：1；
}
.左新闻{
柔性生长：1；
显示器：flex；
弯曲方向：行反向；
}
.左新闻：第n个孩子（2）{
利润率：10px0；
}
.左新闻img{
弹性增长：1.5；
背景颜色：黄色；
}
.左新闻信息{
柔性生长：3；
}

标题
信息

您必须使用

最大宽度

.left-news-img {
    max-width: 30%;
}
.left-news-img > img {
    max-width: 100%;
}

：根目录{
--主色：#0077be；
}
身体{
字体系列：“开放式Sans”，无衬线；
文本对齐：右对齐；
}
ul，
李{
列表样式：无；
填充：0；
保证金：0；
}
div{
边框：1px纯色灰色；
}
.屏幕{
填充：100px；
背景色：#ededed；
高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.包装纸{
宽度：1200px；
高度：450px；
背景色：#fff；
显示器：flex；
弯曲方向：立柱；
}
.章节标题{
柔性生长：1；
}
.新闻发言人{
弹性增长：11；
显示器：flex；
弯曲方向：立柱；
填充：17px；
}
.主要新闻{
弹性增长：11；
显示器：flex；
弯曲方向：行反向；
}
.足部新闻{
柔性生长：1；
}
.对{
弹性增长：7；
显示器：flex；
弯曲方向：行反向；
左边距：20px；
}
.左{
弹性增长：10；
显示器：flex；
弯曲方向：立柱；
}
.img{
最大高度：100%；
溢出：隐藏；
}
.img img{
最大宽度：100%；
}
.info{
柔性生长：1；
}
.左新闻{
柔性生长：1；
显示器：flex；
弯曲方向：行反向；
}
.左新闻：第n个孩子（2）{
利润率：10px0；
}
.左新闻img{
弹性增长：1.5；
背景颜色：黄色；
}
.左新闻信息{
柔性生长：3；
}
.左新闻img{
最大宽度：30%；
}
.左新闻img>img{
最大宽度：100%；
}
.right>.img{
最大宽度：30%；
}

标题
信息

恐怕不太好，我在您的解决方案@rahuls的顶部上传了一个图像，直到div中的图像只满了一半。另一半是空的，背景为黄色@rahul你看过我的演示了吗？你发现了同样的问题吗？是的，当只有3个元素时，它就起作用了，你看到的只有半个div，满是图像。。。