0

la imagen no se adpata al tamaño de pantalla de cada dispositivo. En dispositivos como smartphones es necesario hacer zoom- para adaptar la imagen a la pantalla y en dispositivos grandes como tablets la imagen se rodea de un marco blanco, quedando mas pequeña que la pantalla.

La imagen queda como se muestra en estas fotos en dispositivos de distinto tamaño:

Esta es la etiqueta meta:

<meta content="width=device-width; initial-scale=1.0; maximum-scale=2.0; user-scalable=no;" name="viewport" /> <img src="url de la imagen" width="720" />

Gracias.

Actualización

Con la ayuda de @Guz ahora la imagen se ve entera, pero sigue sin ajustarse a la pantalla, a pesar de darle 100% de ancho.

Código actualizado:

<title></title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta content="width=device-width; initial-scale=1.0; maximum-scale=2.0; user-scalable=1;" name="viewport" />
<style type="text/css">
  html {
    background-color: transparent;
    height: 100%;
    width:100%;
  }
  body {
    background-color: transparent;
    font-size: 11pt;
    font-family:helvetica;
  }

  img {
    border: 0;
    display: block;
    margin: 20px auto;
    max-width: 100%;
  }
</style>

<img src=" https://dl.dropboxusercontent.com/s/uvk4w2uq6tuhsb4/dosisacenoalto.PNG?dl=0" />
0

1 respuesta 1

0

No entiendo cómo esperas que sea responsiva si le estás dando un ancho fijo a la imagen:

<img src="url de la imagen" width="720" />

En su lugar deberías darle un ancho dinámico:

img {
  display: block;
  margin: 20px auto;
  max-width: 90%;
}
<img src="https://i.imgur.com/iPgiV2o.png"/>

Actualización

Con la ayuda de @Guz ahora la imagen seve entera, pero sigue sin ajustarse a la pantalla, a pesar de darle 100% de ancho.

No le has dado un ancho completo, si no, un ancho máximo. Si quieres que la imagen siempre ocupe el 100% del contenedor entonces debes darle simplemente width: 100%.

img {
  display: block;
  margin: 20px auto;
  width: 100%;
}
<img src="https://i.imgur.com/iPgiV2o.png"/>

11
  • Gracias!!funciona a medias, ahora la imagen se ve entera en la pantalla, pero no llega ajustar... el 4 mar. 2017 a las 17:35
  • edito pregunta para mostar como queda ahora el codigo el 4 mar. 2017 a las 17:45
  • dropbox.com/s/dvzgl390f98eoyr/20170304_184819.jpg?dl=0 Asi se ve ahora el 4 mar. 2017 a las 17:53
  • Si quieres que la imagen siempre ocupe el 100% del viewport entonces dale width: 100%.
    – gugadev
    el 4 mar. 2017 a las 18:26
  • He actualizado mi respuesta para que veas el código.
    – gugadev
    el 4 mar. 2017 a las 18:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.