Mobile Technologies Mobile Computing . 1 year ago

Center Oversized Image in Div

Center Oversized Image in Div

2 views   1   0 likes   0 shares Tuteehub forum 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?
tuteehub_quiz
Take Quiz To Earn Credits!

Turn Your Knowledge into Earnings.

profilepic.png

Tuteehub forum answer Answers (1)


profilepic.png
manpreet Tuteehub forum best answer Best Answer 1 year ago
_x000D_ Late to the game, but I found this method is extremely intuitive. https://codepen.io/adamchenwei/pen/BRNxJr CSS .imageContainer { border: 1px black solid; width: 450px; height: 200px; overflow: hidden; } .imageHolder { border: 1px red dotted; height: 100%; display:flex; align-items: center; } .imageItself { height: auto; width: 100%; align-self: center; } HTML
2 views   0 shares
Related Tags