Una imagen responsiva es aquella que puede adaptarse a diferentes dispositivos, independientemente del tamaño de la pantalla. Tener una imagen responsiva en el sitio web se ha vuelto crucial hoy en día. Porque no solo acelera el sitio web sino que también ofrece una excelente experiencia de usuario en todos los dispositivos. Las imágenes responsivas también cambiarán de tamaño al cambiar el tamaño del navegador.
Las imágenes responsivas se adaptan eficientemente a diferentes tamaños de pantalla en diferentes dispositivos. Garantiza que se mantenga la calidad. Un sitio web responsivo con imágenes responsivas seguramente aumenta las tasas de participación y conversión. Las imágenes se pueden hacer responsivas usando CSS junto con consultas de medios.
Este artículo utilizará HTML y CSS para que las imágenes respondan.
¿Cómo hacer que las imágenes sean responsivas con HTML y CSS?
Para hacer que las imágenes respondan usando HTML y CSS, siga los pasos a continuación:
Método 1: utilizar la propiedad 'ancho máximo'
El primer método para hacer que una imagen responda es mediante el uso del botón ' anchura máxima ' propiedad. El ' anchura máxima La propiedad 'se utiliza para definir el ancho máximo de la imagen. En caso de que el contenido exceda el ancho máximo, cambiará la altura del elemento.
Crear HTML
Para agregar un archivo de imagen en la etiqueta
de HTML, los usuarios deben usar la etiquetaAgregar CSS
Ahora, cree un archivo CSS externo y guárdelo con la extensión “. CSS ”Extensión de archivo y vincúlelo dentro de la etiqueta
del archivo HTML. Para diseñar el archivo de imagen en el archivo CSS, comience con la etiqueta img y abra las llaves. Luego, dentro de la llave, agregue ' ancho máximo: 100% ;” para ajustar la imagen horizontalmente dentro del contenedor. Además, evitará que se corten las imágenes. Después de eso, agregue ' altura: automático ;” para ajustar la altura automáticamente, para que la imagen se muestre correctamente:imagen {
anchura máxima : 100% ;
altura : auto ;
}
Cambie el tamaño de la ventana del navegador para comprobar cómo se escala la imagen.
Método 2: utilizar la propiedad 'ancho'
Otro método para hacer que una imagen responda es utilizando la propiedad ' ancho ”. La propiedad ' ancho ”Define el ancho de las imágenes y el texto. No contiene márgenes, relleno ni bordes. Puede establecer el tamaño de las imágenes y el texto en forma de cm, px o%. Para hacer que una imagen responda, simplemente asigne el botón ' ancho 'propiedad de' 100 %”. Configuración ' ancho: 100% ;” significa que la imagen debe ser tan grande como el elemento principal:
imagen {ancho : 100% ;
altura : auto ; }
Lo anterior confirma que la imagen responde. Para comprobar si responde o no, simplemente cambie el tamaño de la ventana del navegador.
Método 3: aplicar consultas de medios
Las consultas de medios CSS ayudan a los usuarios a modificar la apariencia de una página web. La consulta de medios CSS contiene condiciones; siempre que se cumplan estas condiciones, cambiará la apariencia del dispositivo o navegador. Las consultas de medios también pueden ayudar a los usuarios a hacer que las imágenes respondan. Por esa razón, primero, especifique el “@ medios de comunicación ' y luego especifique la etiqueta ' anchura máxima ”Propiedad y asigne el ancho máximo para una imagen dentro de las llaves. Siempre que se cumpla esta condición, la imagen responderá. Después de eso, agregue las llaves, especifique la etiqueta img y especifique ' ancho: 100% ;” valor:
@medios de comunicación ( anchura máxima : 480px ) {imagen {
ancho : 100% ;
}
}
Nota : la imagen solo responderá si cumple con la condición especificada.
Se aplicó la consulta de medios CSS y ahora la imagen responderá si se cambia su tamaño al tamaño de imagen especificado. De lo contrario, no responderá:
Conclusión
Para hacer que las imágenes respondan con HTML y CSS, los usuarios tienen varios métodos. Estos métodos incluyen hacer que las imágenes respondan usando ' anchura máxima ' propiedad, ' ancho ”Propiedad, y también aplicando la consulta de medios CSS. Este artículo ha presentado a los usuarios la solución completa para hacer que las imágenes respondan.