Resize to fit image in div and center horizontally and vertically

Question

I have an image in a div  I would like the image to resize to fit the div  and be horizontally and vertically centered  I would like a solution that works in ie    8

User · Answer

NOT SUPPORTED BY IE  More info here  Can I Use    x000D   x000D   container   x000D    overflow  hidden  x000D    width  100px  x000D    height  100px  x000D    x000D   x000D   container img   x000D    object-fit  cover  x000D    width  100   x000D    min-height  100   x000D    x000D   lt div class  container  gt  x000D       lt img src  http   i imgur com H9lpVkZ jpg    gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Only tested in Chrome 44   Example  http   codepen io hugovk pen OVqBoq  HTML    lt div gt   lt img src  http   lorempixel com 1600 900   gt   lt  div gt    CSS    lt style type  text css  gt  img       position  absolute      top  50       left  50       transform  translateX -50   translateY -50        max-width  100       max-height  100      lt  style gt

User · Answer

This is one way to do it   Fiddle here  http   jsfiddle net 4Mvan 1   HTML    lt div class  container  gt       lt a href     gt       lt img class  resize fit center        src  http   i imgur com H9lpVkZ jpg    gt       lt  a gt   lt  div gt    CSS    container       margin  10px      width  115px      height  115px      line-height  115px      text-align  center      border  1px solid red     resize fit center       max-width 100       max-height 100       vertical-align  middle

User · Answer

SOLUTION   lt style gt   container       margin  10px      width  115px      height  115px      line-height  115px      text-align  center      border  1px solid red      background-image  url  http   i imgur com H9lpVkZ jpg        background-repeat  no-repeat      background-position  center      background-size  contain       lt  style gt    lt div class  container  gt   lt  div gt    lt div class  container  style  width 50px height 100px line-height 100px  gt   lt  div gt    lt div class  container  style  width 140px height 70px line-height 70px  gt   lt  div gt

[css] Resize to fit image in div, and center horizontally and vertically

Examples related to css

Examples related to image

Examples related to center