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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s