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;
}
#wrapperimg {
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;
}
#wrapperimg {
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.innerimg {
display: block;
margin: 0 auto;
}
Note that this requires an extra wrapper, .inner
.
Post a Comment for "Center And Hide Image, Fitting Div Size"