0

I would like to have an image on my html site that is the same width of the site. I have obviously used the <meta name="viewport" content="width=device-width, initial-scale=1.0"> but the image still doesn't change size.

I've even tried some css, but it is only one size: same size as computer, to big for a tablet or phone.

Any help for it?

Could JavaScript help?

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
CodingDog
  • 11
  • 5

3 Answers3

1

You should use viewport unit to do that.

img {
   display: block;
   width: 100vw;
   object-fit: cover;
}
<img src="https://via.placeholder.com/1500" />
mttetc
  • 711
  • 5
  • 12
0
<img src='' style='width: 100%; object-fit:cover'/>
Temo Kasaburi
  • 88
  • 6
  • 2
    Code only answers can generally be improved by adding some explanation of how and why they work. – Jason Aller Aug 12 '20 at 19:05
  • The provided answer was flagged for review as a Low Quality Post. Here are some guidelines for [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer). This provided answer could benefit from an explanation. Code only answers are not considered "good" answers. From Review. – Trenton McKinney Aug 13 '20 at 05:00
0

I think you can set the width of the image to 100%. Example:

img {
    width: 100%;
}

Or if you want it to be the background image of the page, you can use the background-image element. Example:

body {
    background-image: url(your image name);
    background-size: cover;
}

I am not sure, if this is going to work or not. At least, you can try.

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
Azmain Khan
  • 55
  • 7