Cómo hacer que las imágenes se adapten a diferentes pantallas en HTML y CSS

6

Tutorial para adaptar imágenes a diferentes tamaños de pantallas con HTML y CSS

Tutorial para adaptar imágenes a diferentes tamaños de pantallas con HTML y CSS

El diseño web responsive es que el nos ayuda a que el contenido de un sitio web se adapte a diferentes tamaños de pantallas, con el fin de que se pueda ver de la mejor manera en teléfonos celulares, tabletas electrónicas o computadoras.

Hacer esto en HTML y CSS es sencillo, puedes observarlo en el siguiente ejemplo:

Código HTML:

<html>
<head>
<title>Ejemplo de imagenes responsivas</title>
<link rel="stylesheet" href="estilo.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<body>
<div class="logo">
	<img src="logo.jpg">
	</div>

	</body>
</html>

Código CSS:


.logo img {

  width: 100%;
  height: auto;

}

En el archivo CSS, utilizamos el atributo width con un valor del 100%, para ajustar el tamaño de la imagen al 100% de la pantalla, el resultado es el siguiente:

La imagen queda demasiado grande porque no existen otros elementos en la página, entonces se toma el tamaño completo de la imagen. Si requieres que el tamaño máximo sea el real de la imagen, usamos el atributo max-width:

.logo img {

  max-width: 100%;
  height: auto;

}

El resultado es el siguiente:

Y si hacemos más pequeño el navegador, como si fuera una pantalla más chica, la imagen se va ajustando:

Como el código CSS es demasiado corto, se puede agregar dentro del mismo archivo HTML, con la etiqueta <style>, de este modo quedaría así:

<html>
<head>
<title>Ejemplo de imagenes responsivas</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.logo img {

  max-width: 100%;
  height: auto;

}
</style>
</head>
<body>
<div class="logo">
	<img src="logo.jpg">
	</div>

	</body>
</html>

Gracias por apoyar el libre conocimiento con tu donación!
Bitcoin: bc1q4sw9260twfcxatj8mjp7358cyvrf8whzlelyhj
Ethereum: 0xFb93D2a3c9d1A0b83EE629c2dE1725BCa192e581
Litecoin: LbFduJmHvQXcpCnwfUT7aJ4DYoWSL3iQw8
Dogecoin: D7QQVqNR5rk215A4zd2gyzV9P2bLQtZHFV
Transferencia bancaria en México:
Cuenta CLABE: 661610005838513425 Nombre: Masterhacks LATAM Banco: Alternativos

Unete a nuestros grupos:
WhatsApp: https://chat.whatsapp.com/HcazyklpyeU4X3BF657KFQ
Telegram: https://t.me/masterhacks_net
Canal de WhatsApp https://whatsapp.com/channel/0029VaBBLCn5vKAH9NOWCl3K

6 pensamientos sobre “Cómo hacer que las imágenes se adapten a diferentes pantallas en HTML y CSS

  1. Muchas Gracias el codigo css dentro del html me funciono correcta mente busque i busque para adaptarlo en otras paginas i nunca mencionaban tal método Muchas Gracias i una consulta podrán hacer uno así pero que sea de vídeo que se adapte al ancho i que tenga un auto play

    1. Buenas tardes,
      Me gustaría informarle que en su comentario hay varias faltas de ortografía Y muy graves, como por ejemplo (ya se lo he remarcado) la «i» que usa para unir dos frases a modo de nexo, es latina cuando debería ser griega, de nada.

  2. Hola, estoy buscando un código similar para integrarlo en las páginas web de mis clientes porque quiero lograr mejorar la puntuación de rendimiento de mis sitios web.

    En mi caso uso wordpress y el constructor de Divi, me podrías decir si este código se podía implementar de algún modo a las imágenes de las web realizadas con WordPress?

    Creo que es muy interesante lo que propones porque así se corrigen muchos errores relacionados con las Core Web Vitals y el CLS

    Muchas gracias!

  3. Me resulto mas practico anexar directo en la etiqueta de la imagen en el html el «style» de esta forma y funciona igual de bien.
    style=»max-width:100%;width:auto;height:auto;»
    Espero les sea de utilidad.
    Saludos.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *