Question

Given any arbitrary image, I want to crop a square from the center of the image and display it within a given square.

This question is similar to this: CSS Display an Image Resized and Cropped, but I don’t know the size of the image so I can’t use set margins.

Answer 1

One solution is to use a background image centered within an element sized to the cropped dimensions.

---

Basic example

.center-cropped {
  width: 100px;
  height: 100px;
  background-position: center center;
  background-repeat: no-repeat;
}

<div class="center-cropped" 
     style="background-image: url('https://via.placeholder.com/200');">
</div>

---

Example with img tag

This version retains the img tag so that we do not lose the ability to drag or right-click to save the image. Credit to Parker Bennett for the opacity trick.

.center-cropped {
  width: 100px;
  height: 100px;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Set the image to fill its parent and make transparent */
.center-cropped img {
  min-height: 100%;
  min-width: 100%;
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  /* IE 5-7 */
  filter: alpha(opacity=0);
  /* modern browsers */
  opacity: 0;
}

<div class="center-cropped" 
     style="background-image: url('https://via.placeholder.com/200');">
  <img src="https://via.placeholder.com/200" />
</div>

---

object-fit/-position

See supported browsers.

The CSS3 Images specification defines the object-fit and object-position properties which together allow for greater control over the scale and position of the image content of an img element. With these, it will be possible to achieve the desired effect:

.center-cropped {
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  height: 100px;
  width: 100px;
}

<img class="center-cropped" src="https://via.placeholder.com/200" />