Dada cualquier imagen arbitraria, quiero recortar un cuadrado desde el centro de la imagen y mostrarlo dentro de un cuadrado determinado.

Esta pregunta es similar a esta: CSS muestra una imagen redimensionada y recortada , pero no sé el tamaño de la imagen, así que no puedo usar los márgenes establecidos.

Una solución es usar una imagen de fondo centrada dentro de un elemento dimensionado a las dimensiones recortadas.

Ejemplo básico

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

<div class="center-cropped" 
     style="background-image: url('http://placehold.it/200x200');">
</div>

Ejemplo con imgetiqueta

Esta versión conserva la imgetiqueta para que no perdamos la capacidad de arrastrar o hacer clic derecho para guardar la imagen. Gracias a Parker Bennett por el truco de la opacidad.

.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('http://placehold.it/200x200');">
  <img src="http://placehold.it/200x200" />
</div>

object-fit/ /-position

Ver navegadores compatibles .

La especificación de Imágenes CSS3 define las propiedades object-fity object-positionque juntas permiten un mayor control sobre la escala y la posición del contenido de la imagen de un imgelemento. Con estos, será posible lograr el efecto deseado:

.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="http://placehold.it/200x200" />

Estaba buscando una solución CSS pura usando imgetiquetas (no la imagen de fondo).

Encontré esta forma brillante de lograr el objetivo en miniaturas de recorte con css :

.thumbnail {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.thumbnail img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}
.thumbnail img.portrait {
  width: 100%;
  height: auto;
}

Es similar a la respuesta de @Nathan Redblur, pero también permite imágenes de retratos.

Funciona como un encanto para mí. Lo único que necesita saber sobre la imagen es si es vertical u horizontal para establecer la .portraitclase, por lo que tuve que usar un poco de Javascript para esta parte.

Pruebe esto: establezca las dimensiones de recorte de su imagen y use esta línea en su CSS:

object-fit: cover;

Ejemplo con imgetiqueta pero sinbackground-image

Esta solución retiene la imgetiqueta para que no perdamos la capacidad de arrastrar o hacer clic con el botón derecho para guardar la imagen, pero sin background-imagesimplemente centrar y recortar con CSS.

Mantenga la relación de aspecto bien, excepto en imágenes muy altas. (verifique el enlace)

(ver en acción)

Margen

<div class="center-cropped">
    <img src="http://placehold.it/200x150" alt="" />
</div>

CSS

div.center-cropped {
  width: 100px;
  height: 100px;
  overflow:hidden;
}
div.center-cropped img {
  height: 100%;
  min-width: 100%;
  left: 50%;
  position: relative;
  transform: translateX(-50%);
}

Creé una directiva angularjs usando las respuestas de @ Russ y @ Alex

Podría ser interesante en 2014 y más allá: P

html

<div ng-app="croppy">
  <cropped-image src="http://placehold.it/200x200" width="100" height="100"></cropped-image>
</div>

js

angular.module('croppy', [])
  .directive('croppedImage', function () {
      return {
          restrict: "E",
          replace: true,
          template: "<div class='center-cropped'></div>",
          link: function(scope, element, attrs) {
              var width = attrs.width;
              var height = attrs.height;
              element.css('width', width + "px");
              element.css('height', height + "px");
              element.css('backgroundPosition', 'center center');
              element.css('backgroundRepeat', 'no-repeat');
              element.css('backgroundImage', "url('" + attrs.src + "')");
          }
      }
  });

enlace de violín

Prueba esto:

#yourElementId
{
    background: url(yourImageLocation.jpg) no-repeat center center;
    width: 100px;
    height: 100px;
}

Tenga en cuenta que widthy heightsólo funcionará si su elemento DOM tiene la disposición (elemento de un bloque de muestra, como un divo una img). Si no lo es (un lapso, por ejemplo), agréguelo display: block;a las reglas CSS. Si no tiene acceso a los archivos CSS, suelte los estilos en línea en el elemento.

Hay otra forma de recortar la imagen centrada:

.thumbnail{position: relative; overflow: hidden; width: 320px; height: 640px;}
.thumbnail img{
    position: absolute; top: -999px; bottom: -999px; left: -999px; right: -999px;
    width: auto !important; height: 100% !important; margin: auto;
}
.thumbnail img.vertical{width: 100% !important; height: auto !important;}

Lo único que necesitará es agregar la clase "vertical" a las imágenes verticales, puede hacerlo con este código:

jQuery(function($) {
    $('img').one('load', function () {
        var $img = $(this);
        var tempImage1 = new Image();
        tempImage1.src = $img.attr('src');
        tempImage1.onload = function() {
            var ratio = tempImage1.width / tempImage1.height;
            if(!isNaN(ratio) && ratio < 1) $img.addClass('vertical');
        }
    }).each(function () {
        if (this.complete) $(this).load();
    });
});

Nota: "! Important" se usa para anular posibles atributos de ancho y alto en la etiqueta img.