css - recortar - imagen en div responsive
Cómo recortar y centrar automáticamente una imagen (7)
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)
Margen
<div class="center-cropped">
<img src="http://placehold.it/200x150" alt="" />
</div>
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%);
}
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.
Creé una directiva angularjs usando las respuestas de @ Russ y @ Alex
Podría ser interesante en 2014 y más allá: P
html
<div ng-app="croppy">
<cropped-image src="http://placehold.it/200x200" width="100" height="100"></cropped-image>
</div>
js
angular.module(''croppy'', [])
.directive(''croppedImage'', function () {
return {
restrict: "E",
replace: true,
template: "<div class=''center-cropped''></div>",
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 + "'')");
}
}
});
Estaba buscando una solución de CSS pura usando etiquetas img (no la forma de la imagen de fondo).
Encontré esta brillante manera de lograr el objetivo 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.
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.
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.
Pruebe esto: Establezca las dimensiones de recorte de su imagen y use esta línea en su CSS:
object-fit: cover;
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;
}
<div class="center-cropped"
style="background-image: url(''http://placehold.it/200x200'');">
</div>
Ejemplo con etiqueta img
Esta versió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. Gracias a Parker Bennett por el truco de opacidad.
.center-cropped {
width: 100px;
height: 100px;
background-position: center center;
background-repeat: no-repeat;
overflow: hidden;
}
/* Set the image to fill its parent and make transparent */
.center-cropped img {
min-height: 100%;
min-width: 100%;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* IE 5-7 */
filter: alpha(opacity=0);
/* modern browsers */
opacity: 0;
}
<div class="center-cropped"
style="background-image: url(''http://placehold.it/200x200'');">
<img src="http://placehold.it/200x200" />
</div>
object-fit / -position
La especificación de imágenes CSS3 define las propiedades de object-fit object-position que juntas permiten un mayor control sobre la escala y la posición del contenido de la imagen de un elemento img . Con estos, será posible lograr el efecto deseado:
.center-cropped {
object-fit: none; /* Do not scale the image */
object-position: center; /* Center the image within the element */
height: 100px;
width: 100px;
}
<img class="center-cropped" src="http://placehold.it/200x200" />