Resize image grid

Question

I have a gallery with a image grid that I cannot resize to auto cut the images with the same format in the browser and on phone.

5th element with bigger height than normal

CSS

.grid figure {
    position: relative;

    overflow: hidden;

    background: #3085a3;
    text-align: center;
    cursor: pointer;
}

.grid figure img {
    position: relative;
    display: block;
    max-width: 100%;
    opacity: 0.8;
}

HTML

<li class="grid">
    <a href="#image-6">
        <figure class="effect-apollo">
            <img src="{$e}" alt="image6">
            <figcaption></figcaption> 
        </figure>
    </a>
    
    <div class="lb-overlay" id="image-6">
        <img src="{$e}" alt="image6" />
        <div class="gal-info">
            <h3>Tilling</h3>
            <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
        </div>
        <a href="#" class="lb-close">Close</a>
    </div>
</li>

score 0 · Answer 1 · answered Feb 08 '22 at 11:57

0

I personally would use the CSS property "height" and "width". Since if I understand your question correctly the 5th image has a greater height value then the other 6. But also maybe this post will help you:

How can I make all images of different height and width the same via CSS?

answered Feb 08 '22 at 11:57

Kasper

114
8

this way i can only force certain dimensions, and if i change device or resolution it will get bigger or get a diferent format – HPA Informática Feb 08 '22 at 12:01
Then can't you just use some Relative CSS Units like "em", "%", "vh", "vw", or "rem"? That way the images resize depending on the size of the view. @HPAInformática – Kasper Feb 08 '22 at 12:06
sorry to do stupid questions but the all the 16:9 pictures are resizing to fit the grid but the 9:16 are not. i can for it to have a specific size but thats not what am searching – HPA Informática Feb 08 '22 at 12:11
Then can you please explain what it is exactly that you need? – Kasper Feb 08 '22 at 12:13
@HPAInformática Because if it is something to do with the ratio then you might wanna look at the "object-fit" property – Kasper Feb 08 '22 at 12:18
When i create a grid with bootstrap it will slipt the screen 3 columms and I force the image to fit the grid width but it only especify the width not the height. At least that´s what i think the default bootstrap grid does. i want it to have the same height as all the other fotos and "object-fit" the div even if it cut the image in a stupid way – HPA Informática Feb 08 '22 at 12:25

Resize image grid

1 Answers1