centrum obrazu poziomo wewnątrz overflow: hidden div

Question

Mam div nadrzędnej z width:100% i overflow:hidden
muszę umieścić obraz 2500-3000px wewnątrz niego, ale mam obraz poziomo wycentrowany (przycięty lewy i prawy) więc główny segment środkowy obrazu wyświetla się na mniejszych ekranach, ale bez poziomego paska przewijania. Nie można używać background-image, ponieważ obraz jest dynamicznie dodawany przez php.
Proszę o pomoc.

Answer 1

Jeśli znasz szerokość i wysokość obrazu wcześniej (czyli wszystkie są takie same), a następnie można użyć starego 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

Say myImg.jpg jest 100x100px:

<div style="overflow:hidden; width:100%;"> 
    <img src="myImg.jpg" style="left: 50%; top:50%; position:relative; margin:-50px 0 0 -50px; width:100px; height:100px;" /> 
</div> 

Answer 3

CSS:

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

HTML:

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

Demo