Images that span the whole width of the screen

A while back I posted on how to make an image responsive to the screen width and for a while I was using that. However I recently I stumbled upon Marco Arment’s post on the Sony AR7II on my phone and something magical happened.

The image escaped the margins and spanned the whole width of the screen.

Further research showed it happened due to a img class which allowed the image to escape the borders and spread the whole width of the screen, and on desktop the whole width of the image. However, I didn’t want this, I just wanted it on mobile.

I put the following code, stolen and slightly modified from the css of Marco.org, inside the mobile media query of this site.

img { 
margin-left: -20px; /* Or whatever the margin is on your mobile site */
margin-right: -20px; /* Or whatever the margin is on your mobile site */
max-width: 100vw;
}

Allowing it to display along the whole width. This layouts not perfect, certain images that don’t span the whole length will instead align sharply to the left with a lot of white space to the right, not helped by the fact images on this site use drop shadows. But it’s alright for now.

Leave a Reply