html - how - ¿Cómo "recortar" una imagen rectangular en un cuadrado con CSS?

img crop

Question

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:

Dentro de esto:

Answer 1

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:

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

Answer 2

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:

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

});

Answer 3

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

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

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

Answer 4

Suponiendo que no tienen que estar en etiquetas IMG ...

HTML:

<div class="thumb1">
</div>

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:

<div class="thumb1">
<a href="#">Link</a>
</div>

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.

Answer 5

Tuve un problema similar y no pude "comprometerme" 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/

Answer 6

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

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

Answer 7

Use CSS: desbordamiento:

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

Answer 8

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:

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