居中并隐藏图像，拟合div大小

Question

我需要将宽度为1400px的图像置于宽度960px div内，并将左侧220px和右侧220px隐藏。

<div style="width:960px;">
    <img src="src" style="width:1400px" />
</div>

Answer 1

尝试：

div {overflow:hidden;}
img {margin-left: -220px;}

Answer 2

使用以下CSS非常简单：

#wrapper {
    position: relative;
    overflow: hidden;
    width: 960px;
    height: 400px;
}
#wrapper img {
    position: absolute;
    left: -220px;
    width: 1400px;
}

如果你不知道高度，你可能想要使用负左边距或位置：相对。

#wrapper {
    overflow: hidden;
    width: 960px;
}
#wrapper img {
    position: relative;
    left: -220px;
    display: block;
}

如果您的图片大小是动态的，您可以尝试这样的事情：

#wrapper {
    width: 960px;
    overflow: hidden;
}
#wrapper .inner {
    width: 10000px;
    position: relative;
    left: -4520px; /* 5000 minus half the wrapper width */

}
#wrapper .inner img {
    display: block;
    margin: 0 auto;
}

请注意，这需要额外的包装器.inner。

Answer 3

如果您知道图像的宽度，可以使用CSS轻松地将其居中。如果图像宽度发生变化，您可能需要使用一些JS。

http://jsfiddle.net/gr8DE/1/

Answer 4

我想css clip可以完成这项工作。检查this article是否有进出。