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

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