I recently ran into an issue where I wanted to stretch an image (think a color border) all the way across a webpage (horizontally). This was a bit tricky, so I figured I’d share my fix.
- We made a big image, this isn’t necessary, but will keep your image scaling well on a larger page.
- Set the max-width to 100%
- Set the max-height to auto
- Now set the height and width of the image in pixels
That’s it! You should no have a responsive, full width image for your page. Below is the HTML and CSS.
<img class="lpimg" src="ColorBar-Lrg.jpg" alt="" />