Responsive Image – HTML – Mobile

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

Live example:

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: Logo

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

Facebook photo

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

Connecting to %s