Cómo recortar una imagen utilizando CSS

En el diseño web, hay momentos en los que necesitamos recortar una imagen para que encaje perfectamente en un diseño. Afortunadamente, podemos hacer esto fácilmente con CSS. En este artículo, aprenderás cómo recortar una imagen utilizando CSS y cómo modificar el resultado utilizando diferentes propiedades CSS.

Cómo recortar una imagen usando CSS

Para recortar una imagen en CSS, necesitamos crear un elemento contenedor para la imagen y establecer su tamaño. Luego estableceremos la propiedad overflow:hidden; en el contenedor para que recorte cualquier contenido que no encaje dentro de él.

Aquí tienes un ejemplo de cómo recortar una imagen utilizando CSS:

En este ejemplo, hemos creado un div contenedor y le hemos dado un ancho y alto de 400 píxeles. También hemos establecido la propiedad overflow: hidden para recortar cualquier contenido que no encaje dentro del contenedor. Dentro del contenedor, insertamos nuestra imagen.

Modificando el recorte

CSS nos permite modificar cómo se recorta una imagen dentro del contenedor. Podemos cambiar la posición de la imagen, así como controlar el ancho y alto de la zona recortada.

Posicionamiento de la imagen

Podemos cambiar la posición de la imagen dentro del contenedor utilizando la propiedad background-position. Esta propiedad determina la posición del fondo de un elemento, pero también funciona con imágenes.

Por ejemplo, podemos cambiar la posición de la imagen dentro del contenedor con el siguiente código:


.container {
background-image: url('ejemplo.jpg');
background-position: -50px -100px;
width: 400px;
height: 400px;
overflow: hidden;
}


En este ejemplo, hemos eliminado la etiqueta img y cambiamos la propiedad background-image a la ruta de nuestra imagen. Luego establecemos la propiedad background-position a -50 píxeles de la izquierda y -100 píxeles de la parte superior.

Tamaño del recorte

Podemos cambiar el tamaño de la zona recortada utilizando la propiedad background-size. Esta propiedad establece el ancho y alto de la imagen de fondo.

Por ejemplo, podemos cambiar el tamaño de la zona recortada con el siguiente código:


.container {
background-image: url('ejemplo.jpg');
background-position: -50px -100px;
background-size: 200px 200px;
width: 400px;
height: 400px;
overflow: hidden;
}


En este ejemplo, hemos establecido la propiedad background-size a 200 píxeles de ancho y 200 píxeles de alto.

Ejemplos de código

Aquí hay algunos ejemplos adicionales de código para ayudarte a recortar imágenes en diferentes situaciones:


.container {
width: 300px;
height: 300px;
overflow: hidden;
border-radius: 50%;
}

/* Recorte triangular */
.container img {
clip-path: polygon(0 0, 100% 0, 100% 100%);
}


Conclusión

Recortar imágenes utilizando CSS puede parecer un proceso complicado, pero una vez que lo dominas, es una herramienta valiosa para cualquier diseñador web. Espero que este artículo haya sido útil para que aprendas cómo recortar una imagen utilizando CSS y modifiques el resultado para que coincida con tus diseños.

¡No dudes en experimentar con diferentes propiedades CSS para ver los diferentes efectos que puedes crear!

Preguntas frecuentes

¿Puedo utilizar esta técnica en imágenes de fondo?

Sí, puedes utilizar esta técnica en imágenes de fondo si estableces la propiedad background-image en lugar de usar la etiqueta img.

¿Es esta técnica compatible con todos los navegadores web?

Esta técnica es compatible con la mayoría de los navegadores web modernos. Sin embargo, es posible que algunos navegadores no lo admitan completamente o necesiten prefijos de proveedores.

¿Puedo recortar imágenes animadas con este método?

Sí, puedes recortar imágenes animadas utilizando este método si están en el formato correcto (como un GIF animado). Sin embargo, tenga en cuenta que solo se mostrará una sola imagen fija del GIF recortado.

¿Puedo cambiar el recorte de una imagen utilizando JavaScript?

Sí, puedes cambiar el recorte de una imagen utilizando JavaScript. Puedes modificar las propiedades CSS del contenedor y las propiedades de posición de imagen utilizando JavaScript.
[nekopost slugs="css-elimina-el-enlace-subrayador,enlaces-centrales-css,conjunto-de-reglas-css,crear-un-diseno-de-ancho-fijo-con-css,papel-de-css,haga-un-enlace-de-llamadas-de-clic-en-html-con-html,cambiar-el-color-del-boton-en-css-de-flota,cual-es-la-diferencia-entre-el-fondo-ninguno-vs-backgorund-transparent,que-radio-de-contorno-html"]