Responsive img in firefox with maximum width container

Question

Requires responsive img inside the container with maximum 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 and Chrome

Answer 1

CSS for your image is wrong, not

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

to set

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

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