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:
.gallery {
/*--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="">
@* <img src="https://picsum.photos/id/15/300/300" alt="a waterfall and many rocks">
<img src="https://picsum.photos/id/1040/300/300" alt="a house on a mountain">
<img src="https://picsum.photos/id/106/300/300" alt="sime pink flowers">
<img src="https://picsum.photos/id/136/300/300" alt="big rocks with some trees">
<img src="https://picsum.photos/id/1039/300/300" alt="a waterfall, a lot of tree and a great view from the sky">
<img src="https://picsum.photos/id/110/300/300" alt="a cool landscape">
<img src="https://picsum.photos/id/1047/300/300" alt="inside a town between two big buildings">
<img src="https://picsum.photos/id/1057/300/300" alt="a great view of the sea above the mountain"> *@
</div>
My CSS:
As you can see, the only change from the original is replacing “150” with “200”.
Hello,
from what I understand after reading your code you are trying to create a grid of small images and when the user hovers over them the image should scale to bigger dimensions
The code that is causing all the trouble is this:
Basically, here, you set the width and height of each image to 0, making them disappear then you negated that by saying each image should have the max width and height of its container which is the grid cell
When you look at how your set the dimensions of your grid container, you applied the following properties:
You created enough width for three images which is understandable since you set the grid to three columns meaning three images per row, but you set the entire height of the container to the height of three images plus some extra space and then you trying to make each of 15 or 20 images show their full height on a container that has the height of three images, that is why you see rectangles, if you limit the number of images to just 9, they will be squares again
Finally, to fix this, remove all the properties I mentioned before, then on your image selector, set the width of the image to be 200px
Changing the size variable value shouldn’t affect the aspect ratio of the images and the code you posted does not look like the image you posted.
Post all your CSS so we can see what else is going on.
BTW, the use of aspect-ratio in the code feels a little hacky. Usually you would put that on child elements, but here it is used to force a dimension on the container.
Seeing as the grid items already are given a size all you should need on the images is 100% width and height, and it would do the same and not read so confusingly.
Also, as an aside. For grid based image galleries I would suggest using an auto grid. It handles all the responsiveness automatically.
Bootstrap can definitely mess with your custom CSS and the custom CSS should load after Bootstrap.
Your document structure is also incomplete and incorrect (it should be container > row > col) and you have random @ signs everywhere. Comments in HTML looks like this <!-- -->
So far, nothing you have posted replicates the issue from the image. Unless you can post an example that actually replicates the issue, we can’t really help. Post a Codepen that replicates the issue.
Best guess, something is overwriting the CSS for the images, or you have some flexbox causing layout changes, possibly some vertical distribution.
