Center And Hide Image, Fitting Div Size

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

Copy

Solution 2:

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;
}

Note that this requires an extra wrapper, .inner.

Share