Cambiar el tamaño de la imagen en CSS

1. Utilice las propiedades max-width y max-height para cambiar el tamaño de la imagen en CSS
2. Utilice la propiedad object-fit para cambiar el tamaño de la imagen en CSS
3. Utilice el valor auto para el ancho y la propiedad max-height para cambiar el tamaño de la imagen en CSS

Este artículo presenta métodos para cambiar el tamaño de una imagen en CSS para que quepan en un div proporcionalmente, manteniendo su altura y ancho.

Utilice las propiedades max-width y max-height para cambiar el tamaño de la imagen en CSS

Siempre que insertamos una imagen en HTML, la imagen ocupa el total de píxeles de su tamaño. Si la imagen está dentro de un contenedor específico, a veces el tamaño de la imagen puede ser mayor que el tamaño del contenedor. La imagen cubrirá más espacio en la pantalla; tomará áreas de otros elementos. Como resultado, la página web no seguirá nuestro diseño y será poco atractiva. Para deshacernos de este problema, podemos usar las propiedades CSS max-width y max-height para cambiar automáticamente el tamaño de la imagen de acuerdo con el tamaño del contenedor. Estas propiedades establecen la altura y el ancho máximos de un elemento. Si el contenido del elemento tiene más ancho y alto que las propiedades max-width y max-height, sus tamaños se ajustarán con el valor de estas propiedades. Pero, si sus tamaños son pequeños, no se produce ningún efecto. Podemos establecer las propiedades max-height y max-width a un elemento, y así, los elementos dentro del contenedor ajustarán su tamaño.

Por ejemplo, cree un div con la clase cat en HTML. Dentro del div inserte una imagen usando la etiqueta <img>. En CSS, seleccione la etiqueta img y asigne las propiedades max-width y max-height a 100%. Luego, seleccione la clase cat y dale height y width de 200px y 200px.

En el siguiente ejemplo, hemos insertado una imagen aleatoria de LoremFlickr, que tiene 300px de width y height. Pero, el contenedor cat tiene una altura y un ancho de 200px. Como usamos las propiedades max-height y max-width, las imágenes más grandes se reducen al tamaño del contenedor. Por lo tanto, redimensionamos automáticamente la imagen.

Código de ejemplo:

<div class="cat">
    <img src="/img/DelftStack/logo.png" alt="DelftStack Logo" />
</div>

img {
 max-width: 100%;
 max-height: 100%;
}
.cat {
 height: 200px;
 width: 200px;
}

Utilice la propiedad object-fit para cambiar el tamaño de la imagen en CSS

Podemos usar la propiedad object-fit en CSS para cambiar el tamaño de la imagen para que se ajuste a su contenedor. Un contenedor puede ser más grande o más pequeño que la imagen. La propiedad nos permite ajustar la imagen o los videos según el tamaño del contenedor. Podemos especificar cómo encaja la imagen usando la propiedad object-fit. La propiedad toma valores como fill, contain, cover, none y scale-down. Podemos utilizar el valor contain para que la imagen más grande pueda encogerse a la dimensión dada del contenedor.

Por ejemplo, inserte una imagen de 600px de alto y ancho usando la etiqueta img como en el primer ejemplo. En CSS, seleccione la etiqueta y establezca la altura y el ancho en 100%. Utilice el valor contain en la opción object-fit. Luego, seleccione la clase cat y dé la altura y el ancho de 300px al contenedor.

Aquí, insertamos una imagen de una dimensión mayor que el tamaño del contenedor. La imagen es 600px mientras que el contenedor es sólo 300px. Usando la propiedad object-fit, podemos encoger la imagen a las dimensiones del contenedor. Por lo tanto, podemos cambiar el tamaño de la imagen automáticamente.

Código de ejemplo:

<div class="cat">
    <img src="/img/DelftStack/logo.png" alt="DelftStack Logo" />
</div>

img {
 height: 100%;
 width: 100%;
 object-fit: contain;
}
.cat {
 height:300px;
 width: 300px;
}

Utilice el valor auto para el ancho y la propiedad max-height para cambiar el tamaño de la imagen en CSS

Podemos usar el valor auto para el ancho y establecer la propiedad max-height para especificar el ancho de una imagen para que quepa en un contenedor. Reduciremos la altura de la imagen a la altura del contenedor. Por ejemplo, inserte una imagen como la anterior en HTML y establezca la altura del contenedor como 200px en CSS. A continuación, seleccione la etiqueta img, establezca el ancho en auto y establezca la propiedad max-height en 100%.

En el siguiente ejemplo, la imagen tiene inicialmente 400px de alto y ancho. Hemos establecido la altura del contenedor en 200px. La propiedad max-height establecida en 100% reduce la imagen a 200px. Así, redimensionamos la altura de la imagen según la altura del contenedor.

Código de ejemplo:

<div class="cat">
    <img src="/img/DelftStack/logo.png" alt="DelftStack Logo" />
</div>

.cat {
 height:200px
}
img {
 width: auto; 
 max-height: 100%; 
}