Las imágenes adaptables o imágenes responsivas son una combinación de métodos para cargar las imágenes correctas según el tamaño de la pantalla o el dispositivo. Las imágenes adaptables se ajustan automáticamente según los diferentes tamaños de pantalla y dispositivos. Las imágenes adaptables requieren la creación de un diseño diferente para cada dispositivo desde el que se accederá a la página web. Se pueden crear imágenes adaptables utilizando CSS Flexbox fácilmente. Flexbox es un modelo unidimensional de diseño CSS que crea filas o columnas. Flexbox facilita la creación de una estructura receptiva.
Esta publicación proporcionará orientación para crear imágenes adaptables con CSS Flexbox.
¿Cómo crear imágenes adaptables con CSS Flexbox?
Para crear imágenes adaptables utilizando CSS Flexbox, los usuarios primero deben crear la estructura HTML y luego aplicar CSS. Para una demostración práctica, siga los procedimientos que se detallan a continuación.
Crear estructura HTML
Crear un Primero, cree un Flexbox configurando el ' mostrar ” valor de la propiedad a “ doblar ' dentro de ' contenedor de imágenes ” A continuación, aplique CSS a las imágenes especificando ' imagen ' junto con ' .contenedor de imágenes ' nombre. Primero, configure el ' doblar ” valor de la propiedad a “ 1 ”para distribuir equitativamente el espacio libre disponible entre las imágenes. Luego, configure el ' anchura máxima ” valor de la propiedad a “ 100% ”para garantizar que las imágenes no excedan su ancho original. Selecciona el ' altura ” valor de la propiedad a “ auto ”para mantener la relación de aspecto. Por último, agregue espacio entre imágenes configurando el ' margen ” valor de la propiedad a “ 10px ”: Las imágenes adaptativas que utilizan CSS Flexbox se han creado correctamente. La siguiente vista de salida está antes del cierre de la ventana del navegador: Ahora, ajustemos la ventana del navegador para comprobar si la imagen es adaptable y no lo es: Para crear las imágenes adaptables con CSS Flexbox, el usuario primero debe crear la estructura HTML y luego definir el etiqueta. Dentro del
agrega el “ src 'Etiqueta para especificar la ruta de la imagen y agregar la imagen alternativa usando el botón' todo ' etiqueta:
< div clase = 'contenedor-de-imagenes' >
< imagen src = 'imagen-1.jpg' todo = 'Primera imagen' >
< imagen src = 'imagen-2.jpg' todo = 'Segunda imagen' >
div >
Aplicar CSS
mostrar: doblar ;
envoltura flexible: envoltura;
}
.contenedor de imágenes img {
doblar: 1 ;
anchura máxima: 100 % ;
altura: automático;
margen: 10px;
}
Antes de envolver 
Después de envolver 
La imagen de arriba confirma que las imágenes agregadas son adaptables. Conclusión
etiqueta. Luego, aplique el CSS y dentro del CSS establezca la propiedad 'display' en ' doblar ”Para crear Flexbox. Este artículo ha demostrado la guía completa para crear imágenes adaptables con CSS Flexbox.