Full-width image

Responsive with no horizontal scrollbar

Guldborg Marina, Denmark
Photo by Patrick Taylor

The photo above has no 'max-width' style so fills the screen horizontally regardless of its width or the width of the screen.

The width of the image can be limited to it's 'physical' pixel width. A 1200 pixel wide image for example can limited to 1200 pixels in width with style="max-width: 1200px;" (optional). The remaining width of the screen can be given a background shade with (as an example) <div class="max" style="background-color: #555;">.

The markup (without a background shade):

<div class="max">

<img src="img/marina.jpg" width="auto" height="auto" alt="">

</div>

Info

Page last modified: 29 November, 2025