根据屏幕大小更改图像

Question

首先，我搜索了这个网站和其他人的答案。只找到与iphone和机器人有关的东西。

因此，我知道如何使用@media tags更改屏幕分辨率来更改图像尺寸，而不是如何一起更改图像（从image1.png到image2.png）改变屏幕尺寸。

我阅读了以下有关动态网页的文章，他们似乎有我想要的内容，但我不相信他们描述了如何更改图片： http://alistapart.com/article/responsive-web-design

可以使用基本的HTML/CSS来完成吗？

我的示例：将屏幕分辨率从1260px更改为480px时，将图片从image1.png更改为image2.png

Answer 1

您可以使用div代替图片，并使用background-image查询更改其media属性。或者只是根据媒体查询显示/隐藏（使用display: none/block）图像。

不使用javascript就无法更改图片来源。