html image on android does not fit the screen

Question

html image on android does not fit the screen

Navigation

#1 by (0 votes)

0

the image does not match the screen size of each device. In devices such as smartphones it is necessary to zoom-to adapt the image to the screen and in large devices such as tablets the image is surrounded by a white frame, being smaller than the screen.

The image is as shown in these photos on devices of different sizes:

This is the meta tag:

<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" />

Thank you.

Update

With the help of @Guz now the image looks full, but still does not fit the screen, despite giving it 100% width.

Updated code:

<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" />

css

asked by Cosas Varias 04.03.2017 в 12:40

source

1 answer

Copy content from one path to another path PictureBox moves when it should not in Event MouseDown c #

score 0 · Accepted Answer

I do not understand how you expect it to be responsive if you are giving a fixed width to the image:

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

Instead you should give it a dynamic width:

img {
  display: block;
  margin: 20px auto;
  max-width: 90%;
}

<img src="https://i.imgur.com/iPgiV2o.png"/>

Update

With the help of @Guz now the whole seve image, but still does not fit the screen, despite giving it 100% width.

You have not given a full width, otherwise a maximum width . If you want to the image always occupy 100% of the container then you should simply give it width: 100% .

img {
  display: block;
  margin: 20px auto;
  width: 100%;
}

<img src="https://i.imgur.com/iPgiV2o.png"/>