'How to make an image fit on mobile? HTML

I have created a website and there is an image (640x640px) but on mobile you have to side scroll in order to see the full picture. Does anyone know how I could change the size on mobile but make it stay the same on desktop?

this is what i have so far

<pre>
<div>
<img style="object-fit: scale-down;"  src="gifs/preview.gif">
</div>
htmlwebmobile


Solution 1:[1]

You want to use:

img {
  max-width: 100%;
}

Solution 2:[2]

so what you can do fir this is to give the image a classname and then use that classname within a @media query

@media only screen and (max-width: 600px) {
  .classname {
    width: 200px;
    height: 200px;
    background-size: 100% 100%;
  }
}

and then give it whatever size you feel works best for that size you want to achieve

Solution 3:[3]

try incorporating @media queries into you css file. It will look as follows:

@media only screen and (max-width: 600px) {
  img {
    width: 50%;
  }
}

So in the above code we are creating an at media query which will trigger when the screen is less than or equal to 600px, then the following will happen, which in this case, is it will take only 50% of the parent div.

Here is a resource if you still do not understand: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Hope this makes sense :D

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kameron
Solution 2 Kameron
Solution 3 Wiaan.Duvenhage

Related Questions