responsive img in firefox with a max-width container

Question

Need a responsive img inside a container with a max-width.

HTML:

<div class="center-content">
    <img src="assets/test-slider.png" alt="" />
</div>

CSS:

/*center-content*/
.center-content{
    position:relative;
    max-width:1200px;
    margin:0 auto;}


/*img-fix*/
img{
    max-width: 100%;
    height: auto;
}

This works fine in -webkit but not in firefox...

Any help would be appreciated.

/EDIT/

http://jsfiddle.net/WKHHR/

Check the difference between Firefox & Chrome

Answer 1

the CSS for your image is wrong instead of

img{
    max-width: 100%;
    height: auto;
}

put

img{
    width: 100%;
    height: auto;
}

This is because you always want the image width to be 100% of it's parent div.