中心图像水平内溢出：隐藏的div

Question

我有width:100%和overflow:hidden
我需要放置的2500-3000px它里面的图像的父股利，但具有图像水平方向上居中（裁剪左侧和右侧），以使主中心部的图像显示在较小的屏幕上，但没有水平滚动条。
我不能使用background-image，因为图像是通过php动态添加的。
请帮忙。

Answer 1

如果您知道图像的宽度和高度事先（即它们都是一样的），那么你可以使用旧margin/position招：

#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

说myImg.jpg是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