Streaming live at 10am (PST)

Having trouble keeping an image inside it's container

Hey Webflow Community,

My home page hero has a text+button container and then an image below it. I created a flex container (called Hero Image Container) below the text+button and set it to expand, so it takes up the remainder of the screen. Then, I placed an image (called Hero Image) inside this container and set it to max height of 100%. However, the image does not obey the container’s full height; it just goes over it, expanding the container it’s in. It was not like this about a month ago, and I haven’t touched it since I noticed it today. Wondering if someone can help - perhaps this is how it’s supposed to behave.

Here is my read-only link.

Thanks for any help out there, really appreciate it :slight_smile:

Hey @myonke, it would be helpful to see that page rendered on a staging URL so it can be inspected with browser dev tools. Also what browser / device are you experiencing this issue on?

Hey @webdev , thanks for the quick response.

The website is podgiving.com. I am only seeing the issue on MacOS desktop using the latest Chrome (cleared cache and in incognito), but not on Safari desktop. I’ve attached the differences below.

Thank you for checking this out!

Chrome desktop (incorrect)

Safari desktop (correct)

@myonke - The problem is related to:

  1. /* height: 100vh; */
  2. /* max-height: 850px; */

On your “Hero Section”. I removed both and it looks like it addressed the issue.

Thanks @webdev. I did remove this, but this allows my hero section to be as big as the image allows. The image appears just as big, but now you can see the entire image. Whereas on the Safari image above (the correct layout), the image is confined to the correct height.

Are you suggesting the height of the “Hero Section” is the issue and the site is behaving normally? If so, do you know why Safari and Chrome are interpreting the image differently?

Thanks!

Circling back. You could also just give the image container(“hero-image-container”) a max-width right? Say 750px;

The image is not constrained but the Hero Section does constrain the height. Safari is calculating the width of the image to 746.64 pixels. I don’t have time to debug webkit nor chrome for you, sorry.