center image horizontally inside overflow:hidden div

Question

I have a parent div with width:100% and overflow:hidden
I need to place an image of 2500-3000px inside it, but have the image horizontally centered (cropped left and right) so the main center section of the image shows on smaller screens, but without horizontal scrollbar.
I can't use background-image since the image is dynamically added via php.
Please help.

Answer 1

If you know the width and height of the image beforehand (i.e. they're all the same) then you can use the old margin/position trick:

#myImage {
    height: the image's height;
    left: 50%;
    margin-left: -half the image's width;
    margin-top: -half the image's height;
    position: relative;
    top: 50%;
    width: the image's width;
}

Answer 2

CSS:

 div {background:salmon; width:100%; height:200px; overflow:hidden;}
 img {left: 50%; margin-left:-1500px; position:relative;}

HTML:

 <div><img src="" /></div>

Demo