Issues with CSS in an image gallery

[lingo57]

Hi,
I want to add a gallery to the site. But I don’t know CSS very well. I took the code ready from somewhere. In the original example, each image is square. But I made it bigger. That is, it is 150, I changed it to 200.
Now my problem is that the images are rectangular. What should I do to make them square again?

original CSS:

 /*--s: 150px;*/ /* control the size */
    /*--g: 10px;*/ /* control the gap */
    /*--f: 1.5;*/ /* control the scale factor */


    --s: 200px;  /*control the size */
    --g: 10px;  /*control the gap*/
    --f: 1.5;  /*control the scale factor*/


    display: grid;
    gap: var(--g);
    width: calc(3*var(--s) + 2*var(--g));
    aspect-ratio: 1;
    grid-template-columns: repeat(3,auto);
}

    .gallery > img {
        width: 0;
        height: 0;
        min-height: 100%;
        min-width: 100%;
        object-fit: cover;
        cursor: pointer;
        filter: grayscale(80%);
        transition: .35s linear;
    }

    .gallery img:hover {
        filter: grayscale(0);
        width: calc(var(--s)*var(--f));
        height: calc(var(--s)*var(--f));
    }


body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-content: center;
    background: #60c4ff;
}

Original HTML:

<div class="gallery">

                    @* <img src="Album/1.png" alt="a forest after an apocalypse"> *@
                    <img src="Album/1.png" alt="">
                    <img src="Album/2.png" alt="">
                    <img src="Album/3.png" alt="">
                    <img src="Album/9.png" alt="">
                    <img src="Album/27.png" alt="">
                    <img src="Album/28.png" alt="">
                    <img src="Album/29.png" alt="">
                    <img src="Album/35.png" alt="">
                    <img src="Album/36.png" alt="">
                    <img src="Album/37.png" alt="">
                    <img src="Album/40.png" alt="">
                    <img src="Album/44.png" alt="">
                    <img src="Album/26.png" alt="">
                    <img src="Album/31.png" alt="">
                    <img src="Album/43.png" alt="">
                    <img src="Album/39.png" alt="">
                    <img src="Album/33.png" alt="">
                    <img src="Album/11.png" alt="">
                    <img src="Album/13.png" alt="">
                    <img src="Album/14.png" alt="">
                    <img src="Album/18.png" alt="">
                    <img src="Album/16.png" alt="">
                    <img src="Album/17.png" alt="">
                    <img src="Album/20.png" alt="">
                    <img src="Album/10.png" alt="">
                    <img src="Album/15.png" alt="">
                    <img src="Album/45.png" alt="">
                    <img src="Album/4.png" alt="">
                    <img src="Album/42.png" alt="">
                    <img src="Album/6.png" alt="">
                    <img src="Album/7.png" alt="">
                    


                    
                </div>

As you can see, the only change from the original is replacing “150” with “200”.

You can see my gallery:

Let me know your idea.

thanks

 

[Johna]

Are you sure the images were actually square before you changes the size?

 

[lingo57]

yes, I am.

 

[Johna]

Then is there some more code related to the gallery that I'm missing? Because when I copy and pasted that code into an html document, and changed the size back to 150px, they were not square.

The aspect-ratio: 1 that is set on the .gallery element prevents the images from being square, because the parent element is square, and the children (images) have to share that available space.
Perhaps you meant to set aspect-ratio: 1 on the images rather than the gallery container?

Unless I'm missing some code, you changing the --s variable actually has nothing to do with the images not being square. That value is never applied to the images, unless you hover over them.