javascript - 居中和隐藏图像，适合 div 大小

Question

我需要1400px在宽度960pxdiv 内居中宽度的图像，并隐藏 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.