How to make an image fit on mobile? HTML-CodePudding

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>

CodePudding user response：

You want to use:

img {
  max-width: 100%;
}

CodePudding user response：

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

CodePudding user response：

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