¿Cómo “recortar” una imagen rectangular en un cuadrado con CSS?

Sé que es imposible modificar realmente una imagen con CSS, por lo que pongo crop entre comillas.

Lo que me gustaría hacer es tomar imágenes rectangulares y usar CSS para que se vean cuadradas sin distorsionar la imagen.

Básicamente me gustaría cambiar esto:

enter image description here

Dentro de esto:

enter image description here

Suponiendo que no tienen que estar en tags IMG …

HTML:

 

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 } 

EDITAR: Si el div necesita vincularse en algún lugar, simplemente ajuste el HTML y los Estilos de la siguiente manera:

HTML:

  

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 } 

Tenga en cuenta que esto también podría modificarse para que responda, por ejemplo,% anchos y alturas, etc.

Una solución de CSS pura sin envoltorio 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 de desbordamiento de CSS en el div en oculto ( overflow:hidden ).
  4. Pon tu imaginación dentro de la div.
  5. Lucro.

Por ejemplo:

 

Uso de fondo: tapa – 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; } 

Margen:

 

De hecho, 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 (sin embargo, estoy seguro de que podría usar JS simple).

Escribí una publicación en el blog sobre esto si está interesado en más explicaciones, pero el código es bastante simple:

HTML:

 

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: desbordamiento:

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

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

 
.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 use un div con dimensiones cuadradas con la imagen adentro con la 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% } 

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

ACTUALIZADO ASÍ QUE LOS CENTROS DE IMÁGENES

 .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% }