How to crop a rectangular image into a square with CSS

Question

I know that it is impossible to actually modify an image with CSS  which is why I put crop in quotes    What I d like to do is take rectangular images and use CSS to make them appear square without distorting the image at all   I d basically like to turn this     Into this

User · Answer

Either use a div with square dimensions with the image inside with the .testimg class:

.test {
width: 307px;
height: 307px;
overflow:hidden
}

.testimg {
    margin-left: -76px

}

or a square div with a background of the image.

.test2 {
width: 307px;
height: 307px;
    background: url(http://i.stack.imgur.com/GA6bB.png) 50% 50%
}

Here's some examples: http://jsfiddle.net/QqCLC/1/

UPDATED SO THE IMAGE CENTRES

_x000D_

.test {_x000D_
  width: 307px;_x000D_
  height: 307px;_x000D_
  overflow: hidden_x000D_
}_x000D_
_x000D_
.testimg {_x000D_
  margin-left: -76px_x000D_
}_x000D_
_x000D_
.test2 {_x000D_
  width: 307px;_x000D_
  height: 307px;_x000D_
  background: url(http://i.stack.imgur.com/GA6bB.png) 50% 50%_x000D_
}

_x000D_

<div class="test"><img src="http://i.stack.imgur.com/GA6bB.png" width="460" height="307" class="testimg" /></div>_x000D_
_x000D_
<div class="test2"></div>

_x000D_

User · Answer

Assuming they do not have to be in IMG tags     HTML    lt div class  thumb1  gt   lt  div gt    CSS    thumb1      background  url blah jpg  50  50  no-repeat     50  50  centers image in div      width  250px    height  250px      thumb1 hover   YOUR HOVER STYLES HERE     EDIT  If the div needs to link somewhere just adjust HTML and Styles like so   HTML     lt div class  thumb1  gt   lt a href     gt Link lt  a gt   lt  div gt    CSS    thumb1      background  url blah jpg  50  50  no-repeat     50  50  centers image in div      width  250px    height  250px      thumb1 a     display  block    width  250px    height  250px      thumb1 a hover   YOUR HOVER STYLES HERE     Note this could also be modified to be responsive  for example   widths and heights etc

User · Answer

Place your image in a div  Give your div explicit square dimensions  Set the CSS overflow property on the div to hidden  overflow hidden   Put your imagine inside the div  Profit    For example    lt div style  width 200px height 200px overflow hidden  gt       lt img src  foo png    gt   lt  div gt

User · Answer

I had a similar issue and could not  compromise  with background images  I came up with this    lt div class  container  gt       lt img src  http   lorempixel com 800x600 nature  gt   lt  div gt    container       position  relative      width  25      whatever width you want  I was implementing this in a 4 tile grid pattern  I used javascript to set height equal to width        border  2px solid  fff     just to separate the images        overflow  hidden      crop  the image        background   000     incase the image is wider than tall taller than wide        container img       position  absolute      display  block      height  100      all images at least fill the height        top  50      top  left  transform trick to vertically and horizontally center image        left  50       transform  translate3d -50  -50  0        assuming you re using jQuery var h       container   outerWidth        container   css  height  h    px       Hope this helps   Example  https   jsfiddle net cfbuwxmr 1

User · Answer

Use CSS  overflow    thumb      width 230px     height 230px     overflow hidden

User · Answer

I actually came across this same problem recently and ended up with a slightly different approach  I wasn t able to use background images   It does require a tiny bit of jQuery though to determine the orientation of the images  I  sure you could use plain JS instead though    I wrote a blog post about it if you are interested in more explaination but the code is pretty simple   HTML    lt ul class  cropped-images  gt     lt li gt  lt img src  http   fredparke com sites default files cat-portrait jpg    gt  lt  li gt     lt li gt  lt img src  http   fredparke com sites default files cat-landscape jpg    gt  lt  li gt   lt  ul gt    CSS   li     width  150px     Or whatever you want    height  150px     Or whatever you want    overflow  hidden    margin  10px    display  inline-block    vertical-align  top    li img     max-width  100     height  auto    width  auto    li img landscape     max-width  none    max-height  100       jQuery      document   ready function              cropped-images img   each function           if    this  width    gt    this  height                this  addClass  landscape

User · Answer

Using background-size cover - http   codepen io anon pen RNyKzB  CSS    image-container     background-image  url  http   i stack imgur com GA6bB png      background-size cover    background-repeat no-repeat    width 250px    height 250px        Markup    lt div class  image-container  gt  lt  div gt

User · Answer

A pure CSS solution with no wrapper div or other useless code    img     object-fit  cover    width 230px    height 230px

User · Answer

object-fit  cover will do exactly what you need    But it might not work on IE Edge  Follow as shown below to fix it with just CSS to work on all browsers   The approach I took was to position the image inside the container with  absolute and then place it right at the centre using the combination    position  absolute  top  50   left  50   transform  translate -50   -50      Once it is in the centre  I give to the image       For vertical blocks  i e   where height is greater than width  height  100   width  auto      For Horizontal blocks  i e   where width is greater than height  height  auto  width  100     This makes the image get the effect of Object-fit cover      Here is a demonstration of the above logic   https   jsfiddle net furqan 694 s3xLe1gp   This logic works in all browsers     Original Image   Vertically Cropped   Horizontally Cropped

User · Answer

If the image is in a container with a responsive width   HTML   lt div class  img-container  gt     lt img src    alt    gt   lt  div gt    CSS   img-container     position  relative      amp   after       content          display  block      padding-bottom  100          img       position  absolute      width  100       height  100       object-fit  cover

[html] How to "crop" a rectangular image into a square with CSS?

Examples related to html

Examples related to css

Examples related to image

Examples related to crop