Using Flexbox with Images - html

Question

I'm a beginner Web Developer and I've recently started using Flexbox.
I find it is a great tool to use however I have a slight problem.
I have an image I want to put on my site, with a column of text beside it to the right.
As you can see from the code below I have created a wrapper div, with two nested divs inside it.
I have set the display attribute to 'flex' in the wrapper div and set the flex property to '1' for both of the divs inside. I thought this would make both of my divs take up 50% of the space each, but instead it seems like the image takes up more space than it should.
I've used an example image from Pexels. I'm wondering if the actual size of the raw image has an affect on this? For example do I have to manually resize all my photos before putting them on a site, or is there a way to have the image take up 50% of the width at all times, while having the text take up the other 50%, using flexbox?
Sorry if this post is hard to understand. Appreciate your help!
.wrapper
{
display: flex;
border: 3px solid red;
}
.image-div
{
flex: 1;
}
.text-div
{
flex: 1;
}
<div class="wrapper">
<div class="image-div">
<img src="https://images.pexels.com/photos/4403924/pexels-photo-4403924.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
</div>
<div class="text-div">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. In itaque assumenda explicabo blanditiis! Mollitia adipisci voluptates doloremque porro eaque dolor blanditiis deserunt. Illum optio ut minus magni nemo ipsum obcaecati.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. In itaque assumenda explicabo blanditiis! Mollitia adipisci voluptates doloremque porro eaque dolor blanditiis deserunt. Illum optio ut minus magni nemo ipsum obcaecati.</p>
</div>
</div>

Answer 1

Try this:
.wrapper {
display: flex;
border: 3px solid red;
}
.image-div {
flex: 1;
background-color: red;
width: 100%;
}
.image-div>img {
width: 100%;
}
.text-div {
flex: 1;
background-color: yellow;
width: 100%;
}
<div class="wrapper">
<div class="image-div">
<img src="https://images.pexels.com/photos/4403924/pexels-photo-4403924.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
</div>
<div class="text-div">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. In itaque assumenda explicabo blanditiis! Mollitia adipisci voluptates doloremque porro eaque dolor blanditiis deserunt. Illum optio ut minus magni nemo ipsum obcaecati. Lorem ipsum dolor sit,
amet consectetur adipisicing elit. In itaque assumenda explicabo blanditiis! Mollitia adipisci voluptates doloremque porro eaque dolor blanditiis deserunt. Illum optio ut minus magni nemo ipsum obcaecati.
</p>
</div>
</div>
You just have to set the width of the image-div and the text-div to 100%. This way, they will take 50% of the screen width.
Next, we have to set the width of the image inside the image-div to 100%. This way, it will take the whole width of it's parent div. And the same will be for the text div.
Hope it helps

Answer 2

Adding image width in your CSS fixes the issue:
.image-div img { width: 100%; }

Answer 3

You need to set a max-width and height for your image like this:
.image-div img {
max-width: 100%;
max-height: 100%;
}
Heres the example:
.wrapper
{
display: flex;
border: 3px solid red;
}
.image-div
{
flex: 1;
}
.image-div img {
max-width: 100%;
max-height: 100%;
}
.text-div
{
flex: 1;
}
<div class="wrapper">
<div class="image-div">
<img src="https://images.pexels.com/photos/4403924/pexels-photo-4403924.jpeg?cs=srgb&dl=silhouette-of-mountain-under-cloudy-sky-during-sunset-4403924.jpg&fm=jpg">
</div>
<div class="text-div">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. In itaque assumenda explicabo blanditiis! Mollitia adipisci voluptates doloremque porro eaque dolor blanditiis deserunt. Illum optio ut minus magni nemo ipsum obcaecati.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. In itaque assumenda explicabo blanditiis! Mollitia adipisci voluptates doloremque porro eaque dolor blanditiis deserunt. Illum optio ut minus magni nemo ipsum obcaecati.</p>
</div>
</div>

Answer 4

Set your image as position: absolute, stretched to the full extent of it's parent DIV element, and use object-fit to adapt the actual image to a desired value like contain or cover.
Doing so the image will adapt to the area which size is dictated by the text content in the other flex: 1 DIV element:
.wrapper {
display: flex;
border: 3px solid red;
}
.wrapper>* {
position: relative;
flex: 1;
}
.image-div img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="wrapper">
<div class="image-div">
<img src="//placehold.it/300x400&text=Some+image">
</div>
<div class="text-div">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. In itaque assumenda explicabo blanditiis! Mollitia adipisci voluptates doloremque porro eaque dolor blanditiis deserunt. Illum optio ut minus magni nemo ipsum obcaecati. Lorem ipsum dolor sit,
amet consectetur adipisicing elit. In itaque assumenda explicabo blanditiis! Mollitia adipisci voluptates doloremque porro eaque dolor blanditiis deserunt. Illum optio ut minus magni nemo ipsum obcaecati.</p>
</div>
</div>