First and foremost, I searched this site and others for an answer. Only found stuff relating to iphones and androids.
首先,我搜索了这个网站和其他人的答案。只找到与iphone和机器人有关的东西。
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.
因此,我知道如何通过使用@media标签更改屏幕分辨率来更改图像大小,而不是如何通过更改屏幕大小来一起更改图像(从image1.png到image2.png)。
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
我阅读了以下关于动态网页的文章,他们似乎有我想要的东西,但我不相信他们描述了如何更改图像:http://alistapart.com/article/responsive-web-design
Can this be done with basic HTML/CSS?
这可以用基本的HTML / CSS完成吗?
My example: When changing screen resolution from 1260px to 480px, change image from image1.png to image2.png
我的示例:将屏幕分辨率从1260px更改为480px时,将图像从image1.png更改为image2.png
1 个解决方案
#1
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.
您只需使用div并使用媒体查询更改其background-image属性,而不是图像。或者只是根据媒体查询显示/隐藏(使用display:none / block)图像。
Its not possible to change image sources without using javascript.
不使用javascript就无法更改图像源。
#1
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.
您只需使用div并使用媒体查询更改其background-image属性,而不是图像。或者只是根据媒体查询显示/隐藏(使用display:none / block)图像。
Its not possible to change image sources without using javascript.
不使用javascript就无法更改图像源。