En el mundo actual, el uso de Internet móvil está creciendo a un ritmo acelerado, por lo que se ha vuelto necesario que los sitios web tengan diseños receptivos para dispositivos de diferentes tamaños. Los sitios web que pueden cambiar su apariencia dinámicamente según el dispositivo o la pantalla en la que se visualice se denominan sitios web receptivos, es decir, un sitio web con diseño receptivo.
Las imágenes receptivas son solo una parte de los sitios web receptivos. Las imágenes que pueden cambiar sus dimensiones, escalarlas hacia arriba o hacia abajo, según el ancho del navegador, son imágenes receptivas . Las imágenes deben ser receptivas para mejorar la experiencia de los usuarios en varios dispositivos de diferentes tamaños.
¿Cómo hacer que una imagen responda?
Usando CSS: Los siguientes son los pasos para hacer que una imagen responda usando CSS.
Incluya la siguiente metaetiqueta HTML en la etiqueta principal de su documento HTML. Establecerá la ventana gráfica, ajustará el contenido de acuerdo con el ancho de la pantalla del dispositivo y cargará la página en su nivel de zoom inicial en el navegador.
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
Configuración de la propiedad de la imagen . Para hacer que la imagen responda, la siguiente propiedad CSS de ancho se puede aplicar a la imagen y establecer como 100% para que se pueda escalar hacia arriba o hacia abajo según el ancho del navegador.
<img src="...." style="width:100%;">
Ejemplo 1: El siguiente ejemplo demuestra la capacidad de respuesta de la imagen. En el resultado a continuación, el sitio web consta de una imagen receptiva, ya que la imagen se amplía y reduce según el ancho del navegador.
HTML
<!DOCTYPE html> <html> <head> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> </head> <body> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220201191443/logo.png" style="width:100%;"> <h2>Responsive Images</h2> <p> Responsive images are just a part of Responsive websites. Images that can change their dimensions, scaling them up or down, according to the browser width are responsive images. The above image is responsive as it is adjusting itself according to the width of the browser. </p> </body> </html>
Producción:
Usando Bootstrap: Los siguientes son los pasos para hacer que una imagen responda usando Bootstrap.
Incluya la siguiente metaetiqueta HTML en la etiqueta principal de su documento HTML.
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
Incluya la siguiente hoja de estilo y scripts de Bootstrap en la sección principal del código.
<enlace rel=”hoja de estilo” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js” ></guión>
Usando una clase bootstrap .img-fluid de Bootstrap para hacer que la imagen responda. Además, establezca el valor de la propiedad de ancho en 100%.
<img class=".img-fluid" src="...." style="width:100%;">
Ejemplo 2: En el ejemplo anterior, la imagen se hace responsiva usando Bootstrap.
HTML
<!DOCTYPE html> <html> <head> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> </script> </head> <body> <img class=".img-fluid" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220201191443/logo-200x32.png" style="width:100%;"> <h2>Responsive Images</h2> <p> Responsive images are just a part of Responsive websites. Images that can change their dimensions, scaling them up or down, according to the browser width are responsive images. The above image is responsive as it is adjusting itself according to the width of the browser. </p> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por bhawnaatrish y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA