Trying to properly scale full-width image

[Fountain]

(First forum post. Hello everyone!)

I am stumped. I am sure I am missing something obvious. My goal is to have a responsive image (1920x250) to always keep the height of 250px basically (except for mobile) and be full monitor width...WITHOUT distorting / stretching the image. If the window size goes below 1920, the left/right sides simply don't show as needed or scales properly. And if the window size is above 1920, the image then stretches, cutting the bottom of as needed, but doesn't distort it or go over the 250px height. I see many responsive sliders do this, but not sure how to set it up for a static image.

I have the following which works for the height, but distorts the image horizontally which I do not want to happen.

Any help or way to fix this or do it better would be appreciated!

CSS
#subimage {
width:100%;
position:relative;
padding:0;
min-height:250px;
max-height:250px;
overflow:hidden;
}


HTML
<img src="style/images/art/mantra-header.jpg" id="subimage" />

[meesa]

All you need is height:250px;

[Fountain]

Thank you for the suggestion. Applying just a height tag does not solve this specific issue.

Thanks.

[meesa]

What happens when you just apply the height tag?

[Fountain]

The following does not work, as it still distorts the image (obviously from the width tag). But we want a full width.

#subimage {
width:100%;
position:relative;
padding:0;
height:250px;
overflow:hidden;
}


Then we tried without the width tag, and the image is left static and does not scale the width for the responsive feel.

#subimage {
position:relative;
padding:0;
height:250px;
overflow:hidden;
}

I am sure I am just missing the obvious overall. Thanks.

[meesa]

If you want the height the stay the same, the image cannot scale without skewing the image. If you just want more of the image shown, then only set the height, not width. If you want the image centered, use margin-left:-XYpx where xy = (1/2 image width + 1/2 container width).

[Fountain]

Here is an example: http://themes.iki-bir.com/ikaros/

Granted they are using it in a slider, but same result. Look at slide two (the one with the guy on the phone). It stretches as needed, cutting off the bottom depending on the larger width, but still fills the max height and max width.

[meesa]

Okay, you're doing the opposite of what I thought. Set the width, and not the height.