A veces, es necesario ajustar una imagen a una determinada dimensión. Podemos cambiar el tamaño de la imagen especificando el ancho y el alto de una imagen. Una solución común es utilizar el ancho máximo: 100%; y altura: automático; para que las imágenes grandes no excedan el ancho de su contenedor. El anchura máxima y Altura máxima Las propiedades de CSS funcionan mejor, pero no son compatibles con muchos navegadores.
Otra forma de cambiar el tamaño de la imagen es utilizando el ajuste de objeto propiedad, que se ajusta a la imagen. Esta propiedad CSS especifica cómo se cambia el tamaño de un vídeo o una imagen para que se ajuste a su cuadro de contenido. Define cómo encaja un elemento en el contenedor con un ancho y alto establecidos.
El ajuste de objeto La propiedad generalmente se aplica a imágenes o videos. Esta propiedad define cómo responde un elemento al ancho y alto de su contenedor. Principalmente hay cinco valores de ajuste de objeto propiedad como llenar, contener, cubrir, ninguno, reducir escala, inicial , y heredar . El valor predeterminado de esta propiedad es 'llenar' .
Ejemplo
En este ejemplo, estamos cambiando el tamaño de la imagen usando el ancho máximo: 100%; y altura: automático; propiedades.
cell padding div { width: auto; text-align: center; padding: 15px; border: 3px solid red; } img { max-width: 100%; height: auto; } <img src="forest.webp"> Pruébalo ahora Producción
Ejemplo
En este ejemplo, estamos usando el ajuste de objeto: cubierta; propiedad.
div { width: 300px; height: auto; text-align: center; padding: 15px; border: 3px solid red; } img { object-fit: cover; } <img src="forest.webp" width="300" height="300"> Pruébalo ahora Producción
En el ejemplo anterior, hemos utilizado el cubrir valor de la ajuste de objeto propiedad. De manera similar al ejemplo anterior, podemos usar los otros valores de ajuste de objeto propiedad para cambiar el tamaño de la imagen.