Can I have a responsive image with a set height? - css

Question

I working in a page builder
For a shop, I am creating. I can change the CSS which is great.
I’m struggling to get a responsive resize of the images in this 4 column row. Since the images are different heights I have to have to set a height and have responsive width. Is there any way to get it to scale correctly?
The width is auto and the height is a set height based on the size of the screen.
You can see that when I resize it separates from the box and then sometimes get squished.

Answer 1

object-fit property
I did your design by using display : flex; and object-fit : cover; properties. I think that this object-fit property directly on the image is the only lacking property to make your images still looking good despite the screen resolution.
Notice the use of object-position : center; which makes the resizing always axed on the center of the image.
index.html
<div class="foo">
<div class="bar">
<img src="https://picsum.photos/200/300" alt="">
<div>
<h4>Lorem, ipsum dolor sit amet consectetur adipisicing.</h1>
<p>$42</p>
</div>
</div>
<div class="bar">
<img src="https://picsum.photos/500/200" alt="">
<div>
<h4>Lorem, ipsum dolor sit amet consectetur adipisicing.</h1>
<p>$42</p>
</div>
</div>
<div class="bar">
<img src="https://picsum.photos/200/700" alt="">
<div>
<h4>Lorem, ipsum dolor sit amet consectetur adipisicing.</h1>
<p>$42</p>
</div>
</div>
<div class="bar">
<img src="https://picsum.photos/500/400" alt="">
<div>
<h4>Lorem, ipsum dolor sit amet consectetur adipisicing.</h1>
<p>$42</p>
</div>
</div>
</div>
style.css
body {
background-color: #f7f7f7;
font-family: Arial, Helvetica, sans-serif;
}
.foo {
width: 100%;
display: flex;
gap: 20px;
}
.bar {
background-color: #ffffff;
display: flex;
flex-direction: column;
width: 100%;
border-radius: 15px;
overflow: hidden;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.bar > img {
width: 100%;
height: 200px;
object-fit: cover;
object-position: center;
}
h4 {
color:#9ccf74;
}
.bar > div {
padding: 10px;
height: 100px;
}