Html 将Flexbox与图像一起使用

我是一名网络开发新手，最近开始使用Flexbox。 我发现这是一个很好的工具，但我有一个小问题

我有一张图片想放在我的网站上，右边有一列文字。 从下面的代码中可以看到，我创建了一个包装器div，其中包含两个嵌套的div

我已经在包装器div中将display属性设置为'flex'，并将其中两个div的flex属性设置为'1'。我原以为这会让我的两个div都占据50%的空间，但相反，图像似乎占据了更多的空间

我使用了一个来自Pexels的示例图像。我想知道原始图像的实际大小是否会对此产生影响？例如，我是否必须在将所有照片放在网站上之前手动调整它们的大小，或者是否有办法让图像始终占据50%的宽度，而使用flexbox让文本占据另外50%的宽度

抱歉，如果这篇文章很难理解。谢谢你的帮助

.wrapper
{
显示器：flex；
边框：3倍纯红；
}
.影像科
{
弹性：1；
}
.text div
{
弹性：1；
}

Lorem ipsum dolor sit，amet Concertetur Adipising Elite。在这本书中，我想解释一下布兰迪提斯！阿迪皮西软体动物是一种多肉的动物。照明选择减去大白点。
Lorem ipsum dolor sit，amet Concertetur Adipising Elite。在这本书中，我想解释一下布兰迪提斯！阿迪皮西软体动物是一种多肉的动物。照明选择减去大白点

将图像设置为

位置：绝对

，拉伸到其父DIV元素的全部范围，并使用

对象拟合

将实际图像调整为所需值，如

包含

或

覆盖

这样，图像将适应另一个

flex:1

DIV元素中的文本内容决定大小的区域

.wrapper{
显示器：flex；
边框：3倍纯红；
}
.wrapper>*{
位置：相对位置；
弹性：1；
}
.影像组{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
对象匹配：覆盖；
}

Lorem ipsum dolor sit，amet Concertetur Adipising Elite。在这本书中，我想解释一下布兰迪提斯！阿迪皮西软体动物是一种多肉的动物。照明选择减去大白点。Lorem ipsum dolor sit，
阿梅特·康塞特图尔·阿迪皮西奇精英。在这本书中，我想解释一下布兰迪提斯！阿迪皮西软体动物是一种多肉的动物。照明选择减去大白点

您需要设置图像的最大宽度和高度，如下所示：

.image-div img {
  max-width: 100%;
  max-height: 100%;
}

下面是一个例子：

.wrapper
{
显示器：flex；
边框：3倍纯红；
}
.影像科
{
弹性：1；
}
.影像组{
最大宽度：100%；
最大高度：100%；
}
.text div
{
弹性：1；
}

Lorem ipsum dolor sit，amet Concertetur Adipising Elite。在这本书中，我想解释一下布兰迪提斯！阿迪皮西软体动物是一种多肉的动物。照明选择减去大白点。
Lorem ipsum dolor sit，amet Concertetur Adipising Elite。在这本书中，我想解释一下布兰迪提斯！阿迪皮西软体动物是一种多肉的动物。照明选择减去大白点

在CSS中添加图像宽度可以解决以下问题：

.image-div img { width: 100%; }

试试这个：

.wrapper{
显示器：flex；
边框：3倍纯红；
}
.影像科{
弹性：1；
背景色：红色；
宽度：100%；
}
.image div>img{
宽度：100%；
}
.text div{
弹性：1；
背景颜色：黄色；
宽度：100%；
}

Lorem ipsum dolor sit，amet Concertetur Adipising Elite。在这本书中，我想解释一下布兰迪提斯！阿迪皮西软体动物是一种多肉的动物。照明选择减去大白点。Lorem ipsum dolor sit，
阿梅特·康塞特图尔·阿迪皮西奇精英。在这本书中，我想解释一下布兰迪提斯！阿迪皮西软体动物是一种多肉的动物。照明选择减去大白点。

“但是图像似乎占用了更多的空间。”您的答案并没有修正。同样的答案在7分钟前发布。我们还需要多少答案建议OP在

img

元素上使用

width:100%

？还有，为什么

宽度：100%

关于文本div和图像div元素？非常感谢您的帮助Soban，这非常有效。。。我真的不知道我做错了什么！谢谢您的时间：）非常感谢！谢谢你，约翰，真的很感激！