Resizing images gracefully

HTML-CSS
1

I have 3 images as cards, side by side, but I can’t get them to gracefully adjust to the same size.

https://merrit.github.io/product-landing-page-example/

Right now I have this:

    <div class="card">
        <img src="img/echeveria-azulita.jpg" id="product-img">
        <h2>Echeveria azulita</h2>
        <p>$40</p>
    </div>

#product-img {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    width: 100%;
    height: 190px;
}

Have been searching and playing with width, height, float, etc for several hours. They always seem to end up a bit wrong.

Ideally I think the images should shrink down to the max width of its containing grid-column, they would all have the same height while maintain aspect ratio, and if any part (height or width) is too small to fully fill that area it zooms in just enough so that it fills to the same width/height as all the rest of them.

Any suggestions on how to achieve this would be most appreciated.

2

Hey there!

I changed the height property for #product-img to auto.

Does that produce the correct effect for the image?

3

Would be nice :slight_smile:

Unfortunately height: auto lets the images go to different heights (depending on the original aspects)

image
image1072×460 119 KB

4

I believe that this solution can fix that up in this scenario.

1 Like
5

I tried that solution, but it doesn’t seem to load the picture, and I can’t figure out why:

<div id="product-img" style="background-image:url('img/echeveria-azulita.jpg');"></div>

#product-img {
    position: relative;
    float: left;
    width:  auto;
    height: 190px;
    background-position: 50% 50%;
    background-repeat:   no-repeat;
    background-size:     cover;
}

image
image1069×397 85.6 KB

6

Try to set width to 100% now

1 Like
7

Awesome! That worked. Not sure why, but it all seems good now. :smile:

Thanks all for the assist, much appreciated :heart:

8

In case anyone in the future is struggling with background-images, I found this video very helpful:

I understand how it works much better now.