Responsive Image – HTML – Mobile

<img src="https://my-image-url" style="width:100%; max-width:600px;" alt="hockey stick size guide" />




Live example:
https://codepen.io/drew-campbell-griffiths/pen/mdLEzpB

Add style to the image either inline, in the head or in a style sheet (above is inline CSS).

Add the width as a %

Add max-width as a number of pixels

The above image will show as 600px wide on desktop – about half the width of the screen

,and then full width on mobile.

I wanted to make the image easy to see on a mobile, but not full screen on a desktop.