Fully responsiove images in 3 div's side by side - html

Question

So I want these 3 div's to work side by side and the images to be responsive. when I try to set max-width or something it breaks up. Help me out on this one.
.fl {
display: flex;
flex-wrap: no-wrap;
height: 35%;
flex-direction: row;
}
.pic {
width: 34%;
}
.caro {
/* border: 2px solid black; */
height: 100%;
width: 100%;
display: block;
/* z-index: ; */
}
.caro img {
height: 100%;
width: 100%;
filter: brightness(0.5);
transition: all .3s;
}
.caro img:hover {
filter: brightness(1);
}
<div class="fl">
<div class="pic">
<img src="https://via.placeholder.com/1920x1080.jpg" alt="">
</div>
<div class="pic">
<img src="https://via.placeholder.com/1920x1080.jpg" alt="">
</div>
<div class="pic">
<img src="https://via.placeholder.com/1920x1080.jpg" alt="">
</div>
</div>

Answer 1

I would suggest two things:
Use calc to get a third with calc(100% / 3), instead of setting the width to a total of (3*34=) 102%.
Use object-fit: cover on the images to make them fit. I used different sizes on the images, so it's obvious that they are scaling.
Don't use all for transition, because that can cause janky animations due to the browser having to loop through all animatable properties. Always specify what you animate; it's easier to understand the code as well.
Using percentage for height doesn't automatically take the parent's height, so I had to improvise and use vh (viewport height).
body {
margin: 0px;
min-height: 100vh;
}
.fl {
display: flex;
flex-wrap: no-wrap;
height: 100vh;
max-height: 35vh;
}
.fl > .pic {
flex-basis: calc(100% / 3);
}
.caro img {
height: 100%;
width: 100%;
object-fit: cover;
filter: brightness(0.5);
transition: filter .3s;
}
.caro img:hover {
filter: brightness(1);
}
<div class="fl">
<div class="pic">
<img src="https://picsum.photos/100/300">
</div>
<div class="pic">
<img src="https://picsum.photos/50/80.jpg" alt="">
</div>
<div class="pic">
<img src="https://picsum.photos/100/100" alt="">
</div>
</div>