Can I have a responsive image with a set height?

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;
}