Mobile Technologies
Mobile Computing
.
1 year ago
Center Oversized Image in Div
Center Oversized Image in Div
2 views
1 0 likes
0 shares
manpreet
1 answers
_x000D_
_x000D_
I have been trying to sort out how to center an oversized image within a div using css only.
We are using a fluid layout, so the width of the image containers varies as the page width does (height of div is fixed). The image sits within a div, withvalue an inset boxshadow so as to appear as if you are looking through the page at the image.
The image itself has been sized to fill the surrounding div at its widest possible value (the design has a max-width value).
It is pretty easy to do if the image is smaller than the surrounding div:
margin-left: auto;
margin-right: auto;
display: block;
But when the image is larger than the div it simply starts at the left edge and is off center to the right (we are using overflow: hidden).
We could assign a width=100%, but browsers do a lousy job of resizing images and the web design centers around high quality imagery.
Any ideas on centering the image so that overflow:hidden cuts off both edges evenly?
Take Quiz To Earn Credits!
Turn Your Knowledge into Earnings.