Need to change the behavior/resizing/cropping of these background images

Marisa used Ask the Experts™
I am currently building a site that uses this template.

The element I am stuck on is a little more than halfway down the page where is says, "Lets get started with the Webster!"
I really like the feature of having two full width images with text and calls to action like that. The only problem is the way the images are behaving.

Rather than always remaining the same height and getting cropped as the viewport size decreases, I would like the image to always be 100% width and have the height resize proportionately.

I understand that very quickly, perhaps as soon as md or even lg size, the height of the text in the div next to it will exceed the height of the image, so at that media query, I'd like it to be replaced with a different image I will create that is a less wide rectangle.

Then once it hits the sm size, it's fine for the images to be hidden as they currently are.

This question assumes that the answerer is viewing the site on an xl viewport size to begin with, as I would assume most desktop and laptop computers are.

Is this too complicated for a single question?
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

The related css for this (right click inspect / see at the right for the style)
.split-section .img-holder from style.css width and height are set  to 100%

I would not change this but instead clone it as it may break other template part.
Also check for related CSS class if you clone it

You can also tried with object-fit
Most Valuable Expert 2017
Distinguished Expert 2018

The easiest way is to put the image in the div and make the <img> 100% width rather than a background image. That way the image will always fit its container. You are not overlaying anything on the image so this should work.
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013
In your responsive.css line 715 you have

@media (max-width: 991px)
.split-section .img-side {
    display: none;

Open in new window

What you probably want to do instead is to have the image element go 100% above the text in a small screen. I think just commenting out that bit should do the trick.
@media (max-width: 991px)
.split-section .img-side {
    display: none;

Open in new window

Otherwise, if you want it 100% all the way change
col-lg-6 img-side img-left

Open in new window

col-lg-12 img-side img-left

Open in new window

I do feel it looks good as is though and just make it 100% in the small screen.
Web Design
Comment above was my solution.
MarisaWeb Design


It won't let me edit or delete that comment above, but this is what I was trying to say:

I actually took a portion of all three of these suggestions as well as an idea I came up with on my own to come up with a solution that would work.

Since the images I wanted to use are product images overlayed on a patterned background, I actually separated the two elements. I used a css background image with object-fit for the pattern itself, because it was OK if the proportions of that got stretched; it was just the product itself that shouldn't get stretched.

Then for the actual product image, I used a real image in the div (not css bg image) but used a transparent png, so that it achieved the look I was going for for the product on the patterned background, but was separate from the background and used a fixed width so that it would resize with the viewport. I set the width to change based on viewport size, so that the div itself would always be tall enough.

And Scott, I probably will set the images to stack rather than disappear at smaller sizes. Thanks for that.

I don't think I would have come up with that without giving some thought to all your suggestions, so thank you.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial