0

First and foremost, I searched this site and others for an answer. Only found stuff relating to iphones and androids.

So with that, I know how to change image sizes with changing screen resolutions with the @media tags, just not how to change the image all together (from image1.png to image2.png) with changing screen sizes.

I read the following article regarding dynamic webpages and they seem to have what I am looking for, but I don't believe they described how to change images: http://alistapart.com/article/responsive-web-design

Can this be done with basic HTML/CSS?

My example: When changing screen resolution from 1260px to 480px, change image from image1.png to image2.png

Improve this question

1 Answer 1

Reset to default
1

Instead of an image you could just use a div and change its background-image property using media queries. Or just show/hide (using display: none/block) images based on media queries.

Its not possible to change image sources without using javascript.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Using the images as backgrounds also allows to load only the required image (if the media queries are set properly), thus improving bandwidth performance PS: What the OP is asking for is being prepared by the W3C. Check out the picture tag.
not too good with javascript. ill try your method when i get a chance

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.