Center Oversized Image in Div

Question

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

User · Answer

Put a large div inside the div  center that  and the center the image inside that div   This centers it horizontally   HTML    lt div class  imageContainer  gt     lt div class  imageCenterer  gt       lt img src  http   placekitten com 200 200    gt     lt  div gt   lt  div gt    CSS    imageContainer     width  100px    height  100px    overflow  hidden    position  relative     imageCenterer     width  1000px    position  absolute    left  50     top  0    margin-left  -500px     imageCenterer img     display  block    margin  0 auto      Demo  http   jsfiddle net Guffa L9BnL   To center it vertically also  you can use the same for the inner div  but you would need the height of the image to place it absolutely inside it

User · Answer

Building on  yunzen s great answer  I m guessing many people searching for this topic are trying use a large image as a  quot hero quot  background image  for example on a homepage  In this case  they would often want text to appear over the image and to have it scale down well on mobile devices  Here is the perfect CSS for such a background image  use it on the  lt img gt  tag      Set left edge of inner element to 50  of the parent element    margin-left  50       Move to the left by 50  of own width    transform  translateX -50        Scale image    101  - instead of 100  - avoids possible 1px white border on left of image due to rounding error    width  101          but don t scale it too small on mobile devices - adjust this as needed    min-width  1086px      allow content below image to appear on top of image    position  absolute  z-index  -1      OPTIONAL - try with without based on your needs    top  0      OPTIONAL - use if your outer element containing the img has  quot text-align  center quot     left  0

User · Answer

I found this to be a more elegant solution  without flex    wrapper       overflow  hidden     wrapper img       position  absolute      top  50       left  50       transform  translate -50   -50           height  100         optional

User · Answer

Try something like this  This should center any huge element in the middle vertically and horizontally with respect to its parent no matter both of their sizes    parent       position  relative      overflow  hidden        optionally set height and width  it will depend on the rest of the styling used     child       position  absolute      top  -9999px      bottom  -9999px      left  -9999px      right  -9999px      margin  auto

User · Answer

i m a huge fan of making an image the background of a div node -- then you can just use the background-position  center attribute to center it regardless of screen size

User · Answer

Do not use fixed or an explicit width or height to the image tag  Instead  code it         max-width 100         max-height 100     ex  http   jsfiddle net xwrvxser 1

User · Answer

based on  Guffa answer  because I lost more than 2 hours to center a very wide image  for me with a image dimendion of 2500x100px and viewport 1600x1200 or Full HD 1900x1200 works centered  like that    imageContainer     height  100px    overflow  hidden    position  relative       imageCenter     width  auto    position  absolute    left  -10     top  0    margin-left  -500px      imageCenter img    display  block   margin  0 auto      I Hope this helps others to finish faster the task

User · Answer

The width and height are only for example   parentDiv      width  100px      height  100px      position relative     innerDiv      width  200px      height  200px      position absolute       margin  auto      top  0      left  0      right  0      bottom  0      It has to work for you if the left and top of your parent div are not the very top and left of the window of your screen  It works for me

User · Answer

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   lt div class  imageContainer  gt     lt div class  imageHolder  gt       lt img class  imageItself  src  http   www fiorieconfetti com sites default files styles product thumbnail  300x360  public fiore viola 20- 202 jpg    gt     lt  div gt   lt  div gt

User · Answer

It s simple with some flex and overflow set to hidden    lt  DOCTYPE html gt   lt html lang  quot en quot  gt   lt head gt       lt style gt          div               height  150px              width  150px              border  2px solid red                       overflow  hidden              display  flex              align-items  center              justify-content  center                 lt  style gt   lt  head gt   lt body gt       lt div gt           lt img src  quot sun jpg quot  alt  quot  quot  gt       lt  div gt   lt  body gt   lt  html gt

User · Answer

This is an old Q  but a modern solution without flexbox or position absolute works like this   margin-left  50   transform  translateX -50       x000D   x000D   outer   x000D    border  1px solid green  x000D    margin  20px auto  x000D    width  20   x000D    padding  10px 0  x000D         overflow  hidden     x000D    x000D   x000D   inner   x000D    width  150   x000D    background-color  gold  x000D       Set left edge of inner element to 50  of the parent element    x000D    margin-left  50    x000D       Move to the left by 50  of own width    x000D    transform  translateX -50     x000D    x000D   lt div class  outer  gt  x000D     lt div class  inner  gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Quos exercitationem error nemo amet cum quia eaque alias nihil  similique laboriosam enim expedita fugit neque earum et esse ad  dolores sapiente sit cumque vero odit  Ullam corrupti iure eum similique magnam voluptatum ipsam  Maxime ad cumque ut atque suscipit enim quidem  Lorem ipsum dolor sit amet  consectetur adipisicing elit  Excepturi impedit esse modi  porro quibusdam voluptate dolores molestias  sit dolorum veritatis laudantium rem  labore et nobis ratione  Ipsum  aliquid totam repellendus non fugiat id magni voluptate  doloribus tenetur illo mollitia  Voluptatum  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    So why does it work  At first glance it seems that we shift 50  to the right and then 50  to the left again  That would result in zero shift  so what  But the 50  are not the same  because context is important  If you use relative units  a margin will be calculated as percentage of the width of the parent element  while the transform will be 50  relative to the same element    We have this situation before we add the CSS          -------------------------------------------           Parent element P of E                                                                                    -----------------------------------------------------------           Element E                                                           -----------------------------------------------------------                                                               -------------------------------------------    With the added style margin-left  50  we have               -------------------------------------------           Parent element P of E                                                                                                          -----------------------------------------------------------                                 Element E                                                                                 -----------------------------------------------------------                                                               --------------------- ---------------------                    a          gt           a is 50  width of P   And the transform  translateX -50   shifts back to the left          -------------------------------------------           Parent element P of E                                                                             -----------------------------------------------------------    Element E                                                    -----------------------------------------------------------    lt              b                                                                                                  -------------------- ----------------------                    a         gt           a is 50  width of P        b is 50  width of E   Unfortunately this does only work for horizontal centering as the margin percentage calculation is always relative to the width  I e  not only margin-left and margin-right  but also margin-top and margin-bottom are calculated with respect to width   Browser compatibility should be no problem  https   caniuse com  feat transforms2d

User · Answer

One option you can use is object-fit  cover it behaves a bit like background-size  cover  More on object-fit   ignore all the JS below  that s just for the demo   The key here is that you need to set the image inside a wrapper and give it the following properties    wrapper img     height  100     width  100     object-fit  cover      I ve created a demo below where you change the height   width of the wrapper and see in play  The image will always be vertically and horizontally centered  It will take up 100  of its parent width and height  and will not be stretched   squashed  This means that the aspect ratio of the image is maintained  The changes are applied by zooming in   out instead   The only downside to object-fit is that it doesn t work on IE11     x000D   x000D     for demo only x000D  const wrapper   document querySelector   wrapper    x000D  const button   document querySelector  button    x000D  const widthInput   document querySelector   width-input    x000D  const heightInput   document querySelector   height-input    x000D   x000D   x000D  const resizeWrapper        gt    x000D    wrapper style width   widthInput value    px   x000D    wrapper style height   heightInput value    px   x000D    x000D   x000D  button addEventListener  click   resizeWrapper   x000D   wrapper   x000D    overflow  hidden  x000D    max-width  100   x000D    margin-bottom  2em  x000D    border  1px solid red  x000D    x000D   x000D   wrapper img   x000D    display  block  x000D    height  100   x000D    width  100   x000D    object-fit  cover  x000D    x000D   lt div class  wrapper  gt  x000D     lt img src  https   i imgur com DrzMS8i png  gt  x000D   lt  div gt  x000D   x000D   x000D   lt  -- demo only -- gt  x000D   lt lable for  width  gt  x000D    Width   lt input name  width  class  width-input  gt  x000D   lt  lable gt  x000D   lt lable for  height  gt  x000D    height   lt input name  height  class  height-input  gt  x000D   lt  lable gt  x000D   lt button gt change size  lt  button gt  x000D   x000D   x000D

[css] Center Oversized Image in Div

Examples related to css