Lay Theme Forum

Hello,

First of all, thank you for this wonderful theme!

I'm struggling to adapt the row height according to the height of content images. There are several goals I want to achieve, and after a few tests and research, I’m still struggling:

Project page test: https://www.studiojanvermeulen.eu/soho/

01. First image when arriving on page

OK: Row height 100vh - 100px, adaptive background image to follow this height and conserve its proportion.
NOT OK 1: When the width of the window is too large, I would like the image to stick to the left and not be centered.
NOT OK 2: When the width of the window is too small, I would like the row to have the height of the image instead of 100vh - 100px, so that the following content appears just after it.

.full-height {
    display: flex;
    justify-content: flex-start; 
    align-items: center;         
    padding: 0 50px;           
    height: calc(100vh - 100px); 
    box-sizing: border-box;     
}

.full-height img {
    max-height: 100%;
    width: calc(100% - 100px);  
    object-fit: contain !important;
}

.full-height .background-image{
    left: 50px;
    right: 50px;
    width: auto;
    justify-content: flex-start;
}

02. Other rows

I would like the rows to have a maximum height of 100vh - 100px so that visitors always see the picture entirely according to their screen size, while keeping the image proportionate. If the window is too large, the image should stick to its position in the grid (either left or right). The CSS provided does not work as expected:

.row-height {
    max-height: calc(100vh - 100px) !important;
    width: auto;   
    object-fit: contain !important;
}

.row-height img {
    max-height: 100% !important;
    width: auto;   
    object-fit: contain !important;
}

Does anyone have any ideas to help me?

For Case 01, the image is set as a background, but it can be set as an image if that’s easier. For Case 02, images are used due to the possible presence of other images or text in the same row.

Thank you! :)