Styling images best practices

Hi all,
I’m having trouble keeping my images proportional to the size of the browser window (not breakpoints). They stretch and warp when the browser window is resized. I want them to adjust proportionally so I have them set to % of their parent. I previously had them set to AUTO but they got giant. I set them to a specific px width but they didn’t adjust with the browser window. They actually worked ok in Chrome but not in Safari. What do I do?


Here is my site Read-Only:
https://preview.webflow.com/preview/page-scroll-test-b1e42970cf306544965392?utm_medium=preview_link&utm_source=designer&utm_content=page-scroll-test-b1e42970cf306544965392&preview=65f09b8fd5f6263ec805d1c34b200297&workflow=preview

https://page-scroll-test-b1e42970cf306544965392.webflow.io/#section-5