Got this image: https://gmjones.org/test2/test.html When I view it on a smartphone, it doesn't behave responsively. It's from a template. I added: height:100vh; which seemed to work but back in desktop mode, the image was larger. Can someone shed some light on this? Thanks in advance.
100vh as height forces it to the available height, so of course it's bigger on desktop. What you want is max-width AND max-height... and you might want to make sure width and height are set to auto. width:auto; height:auto; max-width:100%; max-height:100%; Code (markup): I also advise AGAINST setting 100vw or 100vh on anything, as it doesn't compensate for scroll bars, meaning it could induce unwanted scroll behaviors if you're not careful with it. Those are useful for sizing small things, but really IMHO if you use it for anything over "50" you're just asking for problems. Also side note, don't use media="all", you're wasting time sending screen layout to print, aural/speech, etc. IF this is screen layout, use media="screen". It's also 2022, you can stop saying type="text/css". There's also no reason to namespace opengraph since meta by definition are open to any name/content. I also don't know wtf "webslides" is, but that CSS is horrifyingly bloated rubbish. Hell this line ALONE: font-size: 62.5%; Code (markup): deserves a good swift kick in the groin.
This css will help you to reduce image size in mobile .container { width: 50%; height: 200px; overflow: hidden; } .container img { max-width: 100%; height: auto; display: block; }