Question : 100% wide html image banner

I'm trying to create a html image banner that stretches all across the window regardless of how big it is
at the same time i dont care if the image gets pixeled
and i want the height to always be proportional to the width so no distortion will happen to faces and other
things that should stay proportional
and i want the height of the banner to stay constant 250px;  as if theres a mask hiding the bottom part of the enlarged image.


any tips and trix would be more than apreciated

Answer : 100% wide html image banner

Hi,

Use a div to clip the image, like the attached code.  I've only drawn a border so you can see that the div tag goes the full width of the window (minus any padding/margins)

The main css here is the "overflow-y: hidden" which clips the image.

More info here: http://www.w3schools.com/css/pr_pos_overflow.asp

1: 2: 3:

<div style='border: thin solid red;width: 100%; height: 250px; overflow-y: hidden'> <img src='image.jpg' alt='' style='width: 100%;'/> </div>