Cómo "recortar" una imagen rectangular en un cuadrado con CSS?

Una solución CSS pura sin envoltura div u otro código inútil:

img {
  object-fit: cover;
  width:230px;
  height:230px;
}

1. Coloque su imagen en un div.
2. Dale a tu div dimensiones cuadradas explícitas.
3. Establezca la propiedad CSS overflow en el div en hidden (overflow:hidden).
4. Pon tu imagen dentro del div.
5. Beneficio.

Por ejemplo:

<div style="width:200px;height:200px;overflow:hidden">
    <img src="foo.png" />
</div>

Usando 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;
}  

Marcado:

<div class="image-container"></div>

En realidad me encontré con este mismo problema recientemente y terminé con un enfoque ligeramente diferente (no pude usar imágenes de fondo). Sin embargo, requiere un poco de jQuery para determinar la orientación de las imágenes (estoy seguro de que podría usar JS simple en su lugar).

Escribí una entrada de blog al respecto si estás interesado en más explicaciones, pero el código es bastante simple:

HTML:

<ul class="cropped-images">
  <li><img src="http://fredparke.com/sites/default/files/cat-portrait.jpg" /></li>
  <li><img src="http://fredparke.com/sites/default/files/cat-landscape.jpg" /></li>
</ul>

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() > $(this).height()) {
        $(this).addClass('landscape');        
      }
    });

});

Use CSS: overflow:

.thumb {
   width:230px;
   height:230px;
   overflow:hidden
}

Tuve un problema similar y no pude "comprometer" con las imágenes de fondo. Se me ocurrió esto.

<div class="container">
    <img src="http://lorempixel.com/800x600/nature">
</div>

.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'});

Espero que esto ayude!

Ejemplo: https://jsfiddle.net/cfbuwxmr/1 /

O bien utilizar un div con dimensiones cuadradas con la imagen en el interior con el .clase testimg:

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

.testimg {
    margin-left: -76px

}

O un div cuadrado con un fondo de la imagen.

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

He Aquí algunos ejemplos: http://jsfiddle.net/QqCLC/1/

ACTUALIZADO PARA QUE LA IMAGEN SE CENTRE

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

.testimg {
  margin-left: -76px
}

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

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

<div class="test2"></div>