Rescaling images in a flexbox css - html

Question

I'm trying to create a 3-wide grid of equally sized images which rescale to fit the screen while maintaining a fixed height. I'm very new to html and CSS so I'm not sure how to go about resizing the images.
The basis of the html I have is:
.flexContainer {
display: flex;
height: 20vh;
}
.flexItem {
width: 33%;
height: 100%;
}
<div class="flexContainer">
<div class="flexItem">
<img src="...">
</div>
<div class="flexItem">
<img src="...">
</div>
<div class="flexItem">
<img src="...">
</div>
</div>
The questions I have are firstly am I structuring this all approximately correctly? I'm sort of just winging it up until now. And then also how do I go about styling the images to fit the box, so far everything I've tried has failed to alter the image size but that may be as I'm applying it to the wrong place or something silly.

Answer 1

First, remove width: 33%; on your flex items. Then add the following CSS:
.flexItem > img {
max-width: 100%;
}
See it working here:
.flexContainer {
display: flex;
justify-content: space-around;
height: 100%;
}
.flexItem {
width: 100%;
height: 100%;
text-align: center;
}
.flexItem > img {
max-width: 100%;
}
<div class="flexContainer">
<div class="flexItem">
<img src="https://dummyimage.com/300x300/000/fff">
</div>
<div class="flexItem">
<img src="https://dummyimage.com/300x300/000/fff">
</div>
<div class="flexItem">
<img src="https://dummyimage.com/300x300/000/fff">
</div>
</div>
Structure is fine. I made other style changes in your CSS but only because that is how I would do it. You can do it your way also.