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>
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
Gracias por el comentario, publicaremos una solución a lo que planteas.
Saludos!
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.
consiguete una vida
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!
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.