HTML - Adaptar imagen en todas las resoluciones

   
Vista:

Adaptar imagen en todas las resoluciones

Publicado por Juan Carlos benetts_carlos314@hotmail.com (1 intervención) el 16/04/2016 21:15:09
Buen día, estoy haciendo una página para una práctica de HTML de la escuela. He estado buscando en varias páginas un código en HTML para que una imagen se adapte a cualquier resolución de pantalla. En mi página puse un "banner" en la parte superior y cada vez que cambio de pantalla (resolución), se desproporciona y sale recortada.

He visto códigos javascript, pero simplemente no me sirven, o tal vez es que no los coloque bien. Si alguien me podría decir como resolver mi problema, estaría muy agradecido.

Que tengan buen día!~
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Diego

Adaptar imagen en todas las resoluciones

Publicado por Diego (11 intervenciones) el 17/04/2016 07:33:49
Hola Juan Carlos!
Lo que deseas hacer es sencillo, solo tienes que hacer media queries en css con las resoluciones que desees, asi las imagenes se ajustaran en tiempo real sin necesidad de acceder con cada resolucion para notar los cambios.

Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Adaptar imagen en todas las resoluciones

Publicado por xve (1178 intervenciones) el 17/04/2016 10:17:13
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Adaptar imagen en todas las resoluciones

Publicado por DAVID (94 intervenciones) el 17/04/2016 12:25:51
Hola Juan Carlos,
yo creo que con aplicar este estilo a la imagen te valdria:
1
.img-responsive {max-width: 100%; height: auto;display:block}

Un saludo,
David
estudio de diseño grafico
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

Adaptar imagen en todas las resoluciones

Publicado por Octavio (4 intervenciones) el 18/04/2016 17:03:54
Aunque las otras respuestas son igual de válidas, también está la opción de usar la nueva etiqueta <picture>. Te pego un ejemplo:

http://www.desarrolloweb.com/articulos/imagenes-responsive-etiqueta-picture.html

Creo que puede ser algo más óptimo que los anteriores, ya que te carga únicamente la imagen del tamaño indicado, no la redimensiona.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar