Cambiar el tamaño de la imagen de bootstrap

Las imágenes son los componentes de diseño populares de cualquier aplicación. Mejoran la visualización de la aplicación y las hacen atractivas. Bootstrap ofrece muchas clases que proporcionan varias funcionalidades a los elementos. Más específicamente, el "img-fluido"Es una de esas clases que proporcionan capacidad de respuesta a las imágenes.

Este artículo describirá:

• Cómo cambiar el tamaño de una imagen usando bootstrap?
• Cómo ver el tamaño de la imagen en diferentes pantallas?

Cómo cambiar el tamaño de una imagen usando bootstrap?

El "img-fluidoLa clase se utiliza para hacer que la imagen responda. Las imágenes receptivas son aquellas que cambian automáticamente de acuerdo con los tamaños de pantalla. La clase "img-fluid" tiene propiedades CSS predefinidas "anchura máxima"Con el valor"100%" y "altura"Con el valor"auto".

Mira el ejemplo para comprender el concepto declarado.

Html

Agregue el HTML ""Elemento con los atributos" src "," clase "y" alt ", donde:

• "SRC"El atributo establece la ruta de la imagen.
• "clase"Se establece con la clase" img-fluid "para que sean receptivas.
• "alternativo"Especifica el texto alternativo que se mostrará si la imagen no puede cargar:

Como puede ver, la imagen receptiva se ha creado con éxito:

Cómo ver el tamaño de la imagen en diferentes pantallas?

En la página web, haga clic con el botón derecho y elija el "Inspeccionar" opción. Como resultado, la ventana de herramienta de desarrolladores se abrirá, desde donde debe hacer clic en el "Barra de herramientas del dispositivo de al revés" característica:

Luego, haga clic en el "Dimensiones: Responsivas" opción. Aparecerá un menú desplegable. Seleccione las opciones y vea cómo se verá la imagen en ese dispositivo en particular:

Así es como las imágenes se pueden cambiar el tamaño usando bootstrap.

Conclusión

El bootstrap "img-fluidoLa clase se utiliza para hacer que las imágenes respondan. Esta clase tiene un CSS predefinido "anchura máxima"Propiedad con el valor"100%" y "altura"Con el valor"auto". Para que la imagen sea rechazable de acuerdo con los tamaños de pantalla, primero, agregue la imagen usando el elemento "" y asocie la clase "IMG-fluid" con ella. Este artículo ha demostrado cómo hacer que la imagen cambie el tamaño usando bootstrap.