Question

我有一个包含width:100%和overflow:hidden的父div 我需要在其中放置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

CSS：

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

HTML：

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

Demo

Answer 3

假设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>

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

3 个答案: