Most elements adapt and respond to the size of the viewport all on their own.
When working with background images, that means they may crop away some of the image.
However, with regular <img> elements, and a few others like <iframe>s, they don’t crop, or adjust in any way. They have a fixed size by default.
For images, that default size is their intrinsic size (whatever the actual size of the image is), and that can quickly lead to overflow issues.
There is a simple fix:
img { display: block; max-inline-size: 100%;}See the Pen images by Kevin (@kevinpowell) on CodePen.
An alternative approach
There is an alternative approach that was proposed by Harry Roberts. It’s a bit more complex, but has some interesting ideas behind it. I thought it was interesting enough that I made a video where I broke the entire thing down.