中心和隐藏图像，适合div大小 [英] Center and hide image, fitting div size

问题描述

我需要将宽度 1400px 的图像放在宽度 960px div中，并将左

I need to center a image of width 1400px inside a width 960px div, and hide 220px for left and 220px for right.

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

推荐答案

p>

This is pretty simple with the following CSS:

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

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

If you don't know the height, you would probably want to use either a negative left margin, or position: relative.

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

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

If the size of your image is dynamic, you could try something like this:

#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 。

Note that this requires an extra wrapper, .inner.

这篇关于中心和隐藏图像，适合div大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！