Cómo hacer que las imágenes se adapten a diferentes pantallas en 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>

Deja un comentario

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