How to maintain aspect ratio of images when browser is resized?

Design help Layout & Design
1

Hello,

Im constructing a website with a similar layout to the one seen here

As you can see, they have various widgets (that work as modals) that are asymmetrically positioned within the main page wrapper. When the browser is resized, these widgets maintain their aspect ratio.

Screenshot 2024-09-05 at 4.08.45 PM
Screenshot 2024-09-05 at 4.08.45 PM1920×1241 119 KB

Screenshot 2024-09-05 at 4.10.02 PM
Screenshot 2024-09-05 at 4.10.02 PM1920×1241 202 KB

.
.
.
.
The version I am building however (currently wireframes), the soon-to-be-widgets I have laid out do not maintain their aspect ratio.

Screenshot 2024-09-05 at 4.21.30 PM
Screenshot 2024-09-05 at 4.21.30 PM3456×2234 237 KB

Screenshot 2024-09-05 at 4.21.54 PM
Screenshot 2024-09-05 at 4.21.54 PM1920×1241 119 KB

Can someone please help me to resolve this issue? I’ve tried setting the parent image wrapper to relative and it’s child image to absolute but it doesn’t seem to address the issue.

Any help would be greatly appreciated

Read Only link is here: Webflow - 2024 NS Impact Report (B)

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hello @Mosiah, just remove the height you have for your images, set them back to auto. I hope this helps!