Split Page Layout - How To Avoid Background Image Getting Cropped/Zoomed?

Hi,

I am using the below CSS to have a section in split page layout (in SquareSpace 7.1), where the (background) image is on one half of the screen and text on the other half of the screen. The page has the exact look I want (basically "Full Bleed" that fills 50% on one side of the screen with 50% blank space for text on the other side, if that makes sense), however, for some reason my background image looks "zoomed in" or "cropped". Is there a way to ensure the full image is displayed (either 100% of its hight or 100% of its width)?

Thank you in advance

I am using the following codes:

Code to place the image on the left:

@media only screen and (min-width: 640px){
[data section id] .section-background {
 width: 50%
}
[data section id] .content-wrapper {
 width: 50%;
 margin-left: 50%!important;
 }
}

Code to place the image on the right:

@media only screen and (min-width: 640px){
[data section id] .section-background {
 width: 50%;
 margin-left: 50%!important;
}
[data section id] .content-wrapper {
 width: 50%;
 margin-left: 0%!important;
 }
}

Hi. What is your site url? We can check easier

Hi tuanphan,

Thank you for your message. The site is not published yet, I will send you the URL and Password via message.

I have found a somewhat working solution, however, it is not perfect yet.

--------------------------------

@media only screen and (min-width: 768px) {
    [data-section-id] .section-background {
        width: 50%;
    }
    [data-section-id] .content-wrapper {
        width: 50%;
        margin-left: 50%!important;
        min-height: 95vh !important;
    }
}

--------------------------------
Whilst “min-height: 95vh !important;” does the job more or less, it still crops the image or zooms in depending on screen size.

Essentially, I am trying to achieve the following (please see the image attached named “Example”):

The image has an aspect ratio of 3/2 (1750 pixels in height and 1167 in width). I’d like the image to scale to 50% of the screen's width and the section height to be adjusted (increased) dynamically to the image's height, so that the image is not cropped or zoomed in any form or on any display.

Thank you for having a look.