¿Cómo centrar y recortar una imagen para que siempre aparezca en forma cuadrada con CSS?

Necesito siempre recortar una https://stackoverflow.com/questions/18673900/how-to-center-and-crop-an-image-to-always-appear-in-square-shape-with-css/imagen de tamaño aleatorio en un cuadrado de 160×160 usando solo CSS. Las imágenes deben permanecer centradas cuando se recortan.

Mi marcado debe ser:

 description  

Buscando en StackOverflow He encontrado algunas respuestas (como esta ), pero no funcionan en los casos en que la https://stackoverflow.com/questions/18673900/how-to-center-and-crop-an-image-to-always-appear-in-square-shape-with-css/imagen puede ser más grande horizontal (ancha) O vertical (alta).

Específicamente, necesito poder presentar tanto una https://stackoverflow.com/questions/18673900/how-to-center-and-crop-an-image-to-always-appear-in-square-shape-with-css/imagen amplia como esta y una https://stackoverflow.com/questions/18673900/how-to-center-and-crop-an-image-to-always-appear-in-square-shape-with-css/imagen alta como esta en forma cuadrada, sin saber de antemano cuál es un rectángulo horizontal o un rectángulo vertical. También debería admitir imágenes ya cuadradas.

jsFiddle Demo

 div { width: 200px; height: 200px; overflow: hidden; margin: 10px; position: relative; } img { position: absolute; margin: auto; min-height: 100%; min-width: 100%; /* For the following settings we set 100%, but it can be higher if needed See the answer's update */ left: -100%; right: -100%; top: -100%; bottom: -100%; } 

Actualización – Mejora

Como Salman A mencionó en los comentarios, la solución original tiene un defecto: no funciona bien si la altura o el ancho del img (o ambos) son (al menos) 3 veces * más grandes que el div que lo contiene.

El problema se muestra aquí .

Salman también dio una solución muy simple y elegante. Solo necesitamos actualizar las coordenadas de posición de la img (arriba, izquierda, abajo, derecha) para trabajar con porcentajes más altos. La siguiente solución funciona con un 1000% , pero, por supuesto, puede ajustarla según sus necesidades.

La solución se muestra aquí .

Antes y después de la corrección

* La razón es que cuando establecemos las coordenadas izquierda y derecha (o arriba y abajo ) del img en -100% (del div que contiene), el ancho total permitido (o: altura ) del img puede ser como máximo el 300% del ancho del div que contiene (o: altura ), porque es la sum del ancho del div (o: altura ) y las coordenadas izquierda y derecha (o: arriba y abajo ).

object-fit propiedad de object-fit hace la magia. En JsFiddle .

CSS

 .image { width: 160px; height: 160px; } .object-fit_fill { object-fit: fill } .object-fit_contain { object-fit: contain } .object-fit_cover { object-fit: cover } .object-fit_none { object-fit: none } .object-fit_scale-down { object-fit: scale-down } 

HTML

 

original image

object-fit: fill

object-fit: contain

object-fit: cover

object-fit: none

object-fit: scale-down

Resultado

Cómo se ven las imágenes renderizadas (en un navegador que admita <code/> object-fit </ code>)”> </p>
</div>
</li><!-- #comment-## -->
<div class=

 
div { width: 200px; height: 200px; overflow: hidden; margin: 10px; position: relative; } .crop { position: absolute; left: -100%; right: -100%; top: -100%; bottom: -100%; margin: auto; height: auto; width: auto; }

http://jsfiddle.net/J7a5R/56/

Con la salvedad de que no funciona en IE y algunos navegadores móviles más antiguos, un simple object-fit: cover; a menudo es la mejor opción.

 .cropper { position: relative; width: 100px; height: 100px; overflow: hidden; } .cropper img { position: absolute; width: 100%; height: 100%; object-fit: cover; } 

Sin el object-fit: cover soporte de object-fit: cover , la imagen se alargará de forma extraña para adaptarla a la caja, de modo que, si se necesita soporte para IE, recomendaría utilizar el enfoque de las otras respuestas con -100% arriba, izquierda, derecha y valores inferiores como una reserva.

http://caniuse.com/#feat=object-fit

Trata de poner tu imagen en un contenedor así:

HTML:

 

CSS:

 div { width: 200px; height: 200px; overflow: hidden; } div > img { width: 300px; } 

Aquí hay un violín .

clip propiedad clip con position puede ayudarte

 a{ position:absolute; clip:rect(0px,200px,200px,0px); } a img{ position:relative; left:-50%; top:-50%; } 

FIDELLA DE TRABAJO

HTML:

 

CSS:

 .thumbnail { background: url(image.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */ width: 250px; height: 250px; } 

enter image description here Encontré mejores soluciones en el siguiente enlace. Solo use “object-fit” https://medium.com/@chrisnager/center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87

 

Lo anterior recortará 50 px desde la parte superior de la imagen. Es posible que desee calcular para obtener un margen superior que se ajuste a sus requisitos en función de la dimensión de la imagen.

Para recortar desde abajo simplemente especifique la altura del div externo y elimine el div interno. Aplica el mismo principio para recortar desde los lados.