Certain images get huge when transitioning from tablet to mobile

[nassimsultan]

nassimsultan

December 3, 2024 at 3:30 pm

I have a page on my site with some photos. For some reason these photos get HUGE when I shrink the window. To be clear, if I continue to shrink the window the photos will also eventually shrink. My assumption is that shrinking a browser window on a desktop computer will correlate with how the site will appear on smaller screens (i.e., a tablet or a mobile browser). To be clear, I recognize that people will either be on mobile or a tablet or a desktop browser. However, it strikes me that there could be certain devices with screen resolutions that end up displaying the huge versions of these images. I have attached three images: one shows the desktop version of the image, one shows how the image appears when the window is shrunk, and the third is how the image appears when the window is at its narrowest.

With all of this in mind, how would I go about adjusting this process such that the images don’t get quite so large during the transition from tablet to mobile?

If my assumption about window size changes correlating to tablet and mobile is incorrect, how would I go about changing the behavior of the image such that on desktop browsers it doesn’t get so large when a window’s width is reduced?

Similarly, how do I adjust image sizes such that they aren’t quite so large when in mobile but *without* setting a specific max pixel width?

Thanks!