Cómo recortar y centrar automáticamente una imagen

Dada cualquier imagen arbitraria, quiero recortar un cuadrado del centro de la imagen y mostrarlo dentro de un cuadrado dado.

Esta pregunta es similar a esto: CSS Muestra una imagen redimensionada y recortada , pero no conozco 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 del tamaño de las dimensiones recortadas.


Ejemplo básico

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

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

Encontré esta shiny manera de lograr el objective en las 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 retrato.

Funciona como un encanto para mí. Lo único que debes saber sobre la imagen es si es vertical u horizontal para configurar la clase .portrait , así que tuve que usar un poco de Javascript para esta parte.

Ejemplo con etiqueta img pero sin background-image

Esta solución conserva la etiqueta img para que no perdamos la capacidad de arrastrar o haga clic con el botón derecho para guardar la imagen, pero sin la imagen de background-image simplemente centre y recorte con css.

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

(ver en acción)

Margen

 

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

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

 object-fit: cover; 

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

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

html

 

js

 angular.module('croppy', []) .directive('croppedImage', function () { return { restrict: "E", replace: true, template: "
", 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 + "')"); } } });

violín

Prueba esto:

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

Tenga en cuenta que el width y height solo funcionarán si su elemento DOM tiene diseño (un elemento mostrado en bloque, como un div o un img ). Si no lo es (un lapso, por ejemplo), agregue display: block; a las reglas de CSS. Si no tiene acceso a los archivos CSS, coloque los estilos alineados en el elemento.

Hay otra forma de recortar imágenes centradas:

 .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 clase “vertical” a 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 utiliza para anular los posibles atributos de ancho y alto en la etiqueta img.