How to center and crop an image to always appear in square shape with CSS

Question

I need to always crop a random-sized image to a square 160x160 using only CSS  The images should stay centered when cropped   My markup should be    lt a href     class  cropper  gt      lt img src  image  alt  description    gt   lt  a gt    Searching on StackOverflow I ve found some answers  such as CSS - How to crop an image to a square  if it s already square then resize it   but they don t work for cases where your image can be larger horizontal  wide  OR vertical  tall    Specifically  I need to be able to present both a wide image like this     and a tall image like this     in square form  without knowing in advance which one is a horizontal rectangle or a vertical rectangle  It should also support already squared images

User · Answer

lt div style  specify your dimension overflow hidden  gt       lt div style  margin-top -50px  gt          lt img        gt       lt  div gt   lt  div gt    The above will crop 50px from the top of the image   You may want to compute to come up wit a top margin that will fit your requirements based on the dimension of the image   To crop from the bottom simply specify the height of the outer div and remove the inner div   Apply the same principle to crop from the sides

User · Answer

With the caveat of it not working in IE and some older mobile browsers  a simple object-fit  cover  is often the best option    cropper     position  relative    width  100px    height  100px    overflow  hidden     cropper img     position  absolute    width  100     height  100     object-fit  cover      Without the object-fit  cover support  the image will be stretched oddly to fit the box so  if support for IE is needed  I d recommend using one of the other answers  approach with -100  top  left  right and bottom values as a fallback   http   caniuse com  feat object-fit

User · Answer

I found a better solutions in following link  Only use  object-fit  https   medium com  chrisnager center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87

User · Answer

clip property with position may help you  a  position absolute  clip rect 0px 200px 200px 0px      a img  position relative  left -50   top -50        WORKING FIDDLE

User · Answer

jsFiddle Demo  x000D   x000D  div       width  250px      height  250px      overflow  hidden      margin  10px      position  relative    img       position  absolute      left  -1000       right  -1000       top  -1000       bottom  -1000       margin  auto      min-height  100       min-width  100     x000D   lt div gt       lt img src  https   i postimg cc TwFrQXrP plus-2 jpg    gt   lt  div gt  x000D   x000D   x000D    A note regarding sizes As Salman A mentioned in the comments   we need to set the img s position coordinates  top  left  bottom  right  to work with percents higher than the image s actual dimensions  I use 1000  in the above example  but of course you can adjust it according to your needs     Further explanation  When we set the img s left and right  or  top and bottom  coordinates to be -100   of the containing div   the overall allowed width  or  height  of the img  can be at most 300  of the containing div s width  or  height   because it s the sum of the div s width  or  height  and the left and right  or  top and bottom  coordinates

User · Answer

lt div gt       lt img class  crop  src  http   lorempixel com 500 200   gt   lt  div gt    lt img src  http   lorempixel com 500 200   gt      div       width  200px      height  200px      overflow  hidden      margin  10px      position  relative     crop       position  absolute      left  -100       right  -100       top  -100       bottom  -100       margin  auto       height  auto      width  auto      http   jsfiddle net J7a5R 56

User · Answer

object-fit property does the magic  On JsFiddle   CSS   image     width  160px    height  160px      object-fit fill     object-fit  fill     object-fit contain     object-fit  contain     object-fit cover     object-fit  cover     object-fit none     object-fit  none     object-fit scale-down     object-fit  scale-down     HTML   lt div class  original-image  gt     lt p gt original image lt  p gt     lt img src  http   lorempixel com 500 200  gt   lt  div gt    lt div class  image  gt     lt p gt object-fit  fill lt  p gt     lt img class  object-fit fill  src  http   lorempixel com 500 200  gt   lt  div gt    lt div class  image  gt     lt p gt object-fit  contain lt  p gt     lt img class  object-fit contain  src  http   lorempixel com 500 200  gt   lt  div gt    lt div class  image  gt     lt p gt object-fit  cover lt  p gt     lt img class  object-fit cover  src  http   lorempixel com 500 200  gt   lt  div gt    lt div class  image  gt     lt p gt object-fit  none lt  p gt     lt img class  object-fit none  src  http   lorempixel com 500 200  gt   lt  div gt    lt div class  image  gt     lt p gt object-fit  scale-down lt  p gt     lt img class  object-fit scale-down  src  http   lorempixel com 500 200  gt   lt  div gt    Result

User · Answer

Try putting your image into a container like so   HTML    lt div gt       lt img src  http   www testimoniesofheavenandhell com Animal-Pictures wp-content uploads 2013 04 Dog-Animal-Picture-Siberian-Husky-Puppy-HD-Wallpaper jpg    gt   lt  div gt    CSS   div       width  200px      height  200px      overflow  hidden     div  gt  img       width  300px      Here s a fiddle

User · Answer

HTML    lt div class  thumbnail  gt   lt  div gt    CSS    thumbnail    background  url image jpg  50  50  no-repeat     50  50  centers image in div    width  250px  height  250px

[html] How to center and crop an image to always appear in square shape with CSS?

Examples related to html

Examples related to css