trung tâm hình ảnh theo chiều ngang bên overflow: hidden div

Question

Tôi có một div cha mẹ với width:100% và overflow:hidden
tôi cần phải đặt một hình ảnh của 2500-3000px bên trong nó, nhưng có hình ảnh theo chiều ngang làm trung tâm (cắt trái và phải) để phần trung tâm chính của hình ảnh hiển thị trên màn hình nhỏ hơn, nhưng không có thanh cuộn ngang.
Tôi không thể sử dụng background-image vì hình ảnh được thêm động thông qua php.
Vui lòng trợ giúp.

Answer 1

Nếu bạn biết chiều rộng và chiều cao của hình ảnh trước đó (tức là tất cả họ đều giống nhau) sau đó bạn có thể sử dụng cũ margin/position lừa:

#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 là 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