CODEWITHSUNDEEP
htmlimagecssmedia-queries
Nabeel M
Nabeel M

Reputation: 1

Image Replacment with CSS and media query

I have an image and I want to switch it's css according to screen size aka Media queries. Right now, the code looks something like this

<img src="image.jpg" widht="20" height="20" alt="Logo"/>

Of course it has width and height written in inline.

In my CSS, I want to change the size of the image. For example, On the full screen, I want the image to show its full width, and on mobile screen I want to show the width of 200px. How can I achieve this by CSS and media queries.

Thanks.

Upvotes: 0

Views: 81

Answers (1)

blackeyebeefhorsefly
blackeyebeefhorsefly

Reputation: 1949

Its really simple just specify the type of media you want to target and the breakpoints. for example.

FOR DESKTOP

img { width:100%; height:auto }

FOR MOBILE

@media screen and (max-width:640px) {
    img { width:100%; max-width:200px; height:auto; }
}

Upvotes: 1

Related Questions