Hey!
With this CSS, an image will always fit into the browser window's height. Note that this won't work on any website, as this CSS works together with some other LayGridder CSS.
.lg-type-img.lg-col{
max-height: 100%;
}
.lg-type-img.lg-col .lg-placeholder{
position: static!important;
}
.lg-type-img.lg-col img{
object-fit: contain;
}
This some optional CSS. When a row only contains only one image, this one image will always be centered and fit into the browser window's height:
.lg-one-col-row.lg-contains-img .lg-placeholder{
position: static!important;
}
.lg-one-col-row.lg-contains-img .lg-col{
position: static!important;
}
.lg-one-col-row.lg-contains-img img{
object-fit: contain;
}
I added both of these CSS to your stylesheet. Find it at /* CSS by Armin Unruh */
Also I commented out some CSS that you won't need anymore above that in your stylesheet.
You will notice that while this works, your texts do not resize in the same manner as your images and the text will overlap images in some cases.
I see that you only have lots of text in your first row in the example page you sent me. To avoid having that text overlap the images below you could use this CSS:
.lg-grid .lg-row:first-child {
max-height: calc(100vh - 180px);
height: auto;
}
Note that your other CSS is
.lg-grid .lg-row {
height: calc(100vh - 80px);
}
So when I set .lg-grid .lg-row:first-child
to height:auto
this will prevent the row getting smaller than it's row content.
Also you will notice the image sizes change, but the spaces between your images won't change relative to the image sizes. In example 2 below I mention how to do this theoretically. (Not rlly possible with laygridder).
I had to think about this problem more deeply and wrote down some of my thoughts here:
So the problem is the layouts that can be done with laygridder are entirely browser-width-based. Not browser-height-based.
What you are looking for is a layout that is width and height based at the same time.
The pictures doesn’t fit to the row’s height… They exceed the containers.
And if I overwrite the img’s height with CSS, it breaks the proportion of the picture.
Let's for a minute not think about laygridder, but let's think about how to approach this problem in general:
Simple example. You have an image with an aspect ratio of 4:3.
First image on the left, the browser is wide, image on the right, the browser is narrow.

In the first wide browser, the image has to be "height: 100%",
In the second narrow browser, the image has to be "width: 100%"
There are multiple ways to code this:
JavaScript and CSS:
- You need to compare the aspect ratio of your browser window to the aspect ratio of the image. If
windowAr > imageAr then give image height: 100%; and width: auto;
- CSS only: Give image
max-width: 100%; max-height: 100%; height: 100%; width: 100%;
The downside here is the natural size of the image should be larger than your browser window if you want to always have the same space between image and browser edge.
- CSS only:
width: 100%; height: 100%; object-fit: contain;
Second example. You have two images next to each other.

Imagine around these two images is a container (red line). You need to compare the red container's aspect ratio to the browser-window's aspect ratio. Based on that you give the container either width:auto; height: 100%;
or width: 100%; height: auto;
.
Here is a somewhat similar example to the one before with 2 images that have different aspect ratios.

This is what it should work like if you were to do a layout that is both browser-width and browser-height based.
Lastly, I want to apologize for you having to wait so long for a response. I asked one of my colleagues to do support for laygridder, but he failed to do so. Now I will ask someone else to do the support.