center image in div with overflow hidden

Question

I have an image of 400px and a div that is smaller  the width is not always 300px as in my example   I want to center the image in the div  and if there is an overflow  hide it   Note  I must keep the position absolute on the image  I m working with css-transitions  and if I use position relative  my image shakes a bit  https   web archive org web 20120528225923 http   ta6 maxplus be 8888     jsfiddle http   jsfiddle net wjw83 1

User · Answer

just make sure how you are using image through css background use backgroud image position like background  url your image path  no-repeat center center  automatically it wil align center to the screen

User · Answer

For me flex-box worked perfect to center the image   this is my html-code    lt div class  img-wrapper  gt     lt img src        gt   lt  div gt    and this i used for css  I wanted the Image same wide as the wrapper-element  but if the height is greater than the height of the wrapper-element it should be  cropped  not displayed    img-wrapper    width  100     height  50     overflow  hidden    display  flex    flex-direction  column    justify-content  center    align-items  center     img     height  auto    width  100

User · Answer

working solution with flex-box for posterity  main points   overflow hidden for wrapper image height and width must be specified  cannot be percentage  use any method you want to center the image     wrapper       width  80      height  80      overflow  hidden      align-items  center      justify-content  center        image       width  min-content      height  min-content

User · Answer

None of the above solutions were working out well for me  I needed a dynamic image size to fit in a circular parent container with overflow hidden   circle-container       width 100px      height 100px      text-align center      border-radius 50       overflow hidden      circle-img img     min-width 100px    max-width none    height 100px    margin 0 -100       Working example here  http   codepen io simgooder pen yNmXer

User · Answer

This issue is a huge pain in the a   but I finally got it  I ve seen a lot of complicated solutions  This is so simple now that I see it    parent     width 70px    height 70px      child     height 100     width 10000px     Or some other impossibly large number      margin-left  -4965px     -1   child width-parent width  2         child img     display block     won t work without this      height 100     margin 0 auto

User · Answer

I have been trying to implement Jaap s answer inside this page of my recent site  with one difference   the  main  height   was set to auto instead of a fixed px value  As responsive developer i am looking for a solution to synchronize the image height with the left floating text element  yet only in case my text height becomes greater then my actual image height   In that case the image should not be rescaled  but cropped and centered as decribed in the original question here above  Can this be done   You can simulate the behaviour by slowly downsizing the browser s width

User · Answer

this seems to work on our site  using your ideas and a little math based upon the left edge of wrapper div   It seems redundant to go left 50  then take out 50  extra margin  but it seems to work   div ImgWrapper       width  160px      height  160px     overflow  hidden      text-align  center     img CropCenter       left  50       margin-left  -100       position  relative      width  auto  important      height  160px  important      lt div class  ImgWrapper  gt   lt a href     gt  lt img class  CropCenter  src  img png  gt  lt  a gt   lt  div gt

User · Answer

Found this nice solution by MELISSA PENTA  https   www localwisdom com   HTML  lt div class  quot wrapper quot  gt      lt img src  quot image jpg quot    gt   lt  div gt   CSS div wrapper     height 200px    line-height 200px    overflow hidden    text-align center    width 200px    div wrapper img     margin -100      Center any size image in div  Used with rounded wrapper and different sized images  CSS  item-image       border  5px solid  ccc      border-radius  100       margin  0 auto      height  200px      width  200px      overflow  hidden      text-align  center     item-image img       height  200px          margin  -100       max-width  none      width  auto         Working example here codepen

User · Answer

you the have to corp your image from sides to hide it try this  3 Easy and Fast CSS Techniques for Faux Image Cropping   Css       one of the demo for the first way on the site above  try demo  i will do some reading on it too

User · Answer

Most recent solution   HTML   lt div class  parent  gt       lt img src  image jpg  height  600  width  600   gt   lt  div gt    CSS   parent       width  200px      height  200px      overflow  hidden         Magic        display  flex      align-items  center     vertical        justify-content  center     horizontal

User · Answer

You should make the container relative and give it a height as well and you re done   http   jsfiddle net jaap wjw83 4    x000D   x000D   main   x000D    width  300px  x000D    margin  0 auto  x000D    overflow  hidden  x000D    position  relative  x000D    height  200px  x000D    x000D   x000D  img absolute   x000D    left  50   x000D    margin-left  -200px  x000D    position  absolute  x000D    x000D   lt div class  main  gt  x000D     lt img class  absolute  src  http   via placeholder com 400x200 A44 EED text Hello  alt      gt  x000D   lt  div gt  x000D   lt br   gt  x000D   lt img src  http   via placeholder com 400x200 A44 EED text Hello  alt      gt  x000D   x000D   x000D    If you want to you can also center the image vertically by adding a negative margin and top position  http   jsfiddle net jaap wjw83 5

User · Answer

lt html gt   lt head gt   lt style type  text css  gt       div-main          height 200px          width 200px          overflow  hidden          background url img jpg  no-repeat center center        lt  style gt   lt  head gt   lt body gt       lt div class  div-main  gt         lt  div gt   lt  body gt

[html] center image in div with overflow hidden

Examples related to html

Examples related to css

Examples related to center