Recortar una imagen en HTML

1. Utilice las propiedades CSS de width, height y overflow para recortar la imagen en HTML
2. Utilice las propiedades CSS object-fit para recortar una imagen en HTML

En este artículo, presentaremos métodos para recortar una imagen en HTML.

Utilice las propiedades CSS de width, height y overflow para recortar la imagen en HTML

Junto con width y height, los contenedores CSS también tienen una propiedad de overflow que se puede utilizar para recortar imágenes. Para activar la propiedad de desbordamiento, debemos encerrar la imagen dentro de un div de un ancho y alto particular y establecer overflow en hidden. Se asegurará de que el contenedor base retendrá su estructura y cualquier desbordamiento de imagen se ocultará detrás del contenedor. Por último, podemos usar la propiedad de margen para ajustar el área recortada. Esta propiedad toma cuatro valores. Sin embargo, solo el primero y el último de los cuatro valores son esenciales, ya que representan los píxeles de la parte superior e izquierda, respectivamente.

Por ejemplo, inserte la imagen con la URL https://tinyurl.com/k764en3w en dos contenedores diferentes. Dale a la segunda imagen una clase cropped para que podamos aplicarle algunos estilos y recortar la imagen. En CSS, seleccione la clase cropped y establezca height y width en 150px. Establezca la propiedad overflow en hidden. A continuación, cree un borde. Ahora, seleccione la etiqueta img de la clase cropped y establezca su margen como margin: -10px 0px 0px -180px.

De esta forma, podemos recortar una imagen en HTML usando CSS.

Código de ejemplo:

<h3> Original image: </h3>
<img
    src="https://tinyurl.com/k764en3w"
    >
<h3> Cropped image: </h3>
<div class="cropped">
    <img
        src="https://tinyurl.com/k764en3w"
        >
</div>

.cropped {
     width: 150px;
     height: 150px;
     overflow: hidden;
     border: 5px solid black;
}

 .cropped img {
     margin: -10px 0px 0px -180px;
}

Utilice las propiedades CSS object-fit para recortar una imagen en HTML

La propiedad CSS object-fit ayuda a recortar las imágenes. Puede tener cinco valores, pero el valor cover es el más adecuado para recortar una imagen. Si establecemos el valor object-fit como cover se preservará la relación de aspecto de la imagen y, al mismo tiempo, se ajustará al tamaño de su cuadro de contenido. También podemos usar la propiedad object-fit junto con object-position para ajustar el área de la imagen a recortar. La propiedad object-position requiere dos valores: x% e y% para colocar la imagen (la posición predeterminada es 50% 50%). También podemos proporcionar posiciones de píxeles: xpx e ypx, pero eso generalmente no es útil.

Por ejemplo, inserte la imagen tres veces. La primera imagen es la imagen original y las dos imágenes serán las imágenes recortadas. Dar las clases cropped1 y cropped2 a la segunda y tercera imágenes. Establezca un ancho, alto y borde específicos para estas imágenes. Utilice la propiedad object-fit y establézcala en cover en ambas imágenes. En la tercera imagen, establezca la propiedad object-position a 20% 10%.

De esta forma, podemos recortar una imagen en HTML usando CSS.

Código de ejemplo:

<div>
    <h3> Original image: </h3>
    <img src="https://tinyurl.com/k764en3w">
    <h3> Cropped image using object-fit: </h3>
    <img
        class="cropped1" src="https://tinyurl.com/k764en3w">
    <h3> Cropped image adjusted with object-position: </h3>
    <img
        class="cropped2" src="https://tinyurl.com/k764en3w"> 
</div>

.cropped1 {
     width: 200px;
     height: 200px;
     object-fit: cover;
     border: 5px solid black;
}
 .cropped2 {
     width: 200px;
     height: 200px;
     object-fit: cover;
     object-position: 20% 10%;
     border: 5px solid black;
}