Question

我想根据屏幕尺寸更改图像，在移动尺寸时图像尺寸合适，但在全屏时图像太大。我在另一个问题中提出了这个问题。

它适用于URL，但我不明白如何使其适用于本地图像。例如图/

https://stackoverflow.com/a/43901756/7962671

谢谢，

路

Answer 1

您的样式表相对于您的img文件夹位于何处？如果您的站点目录是按以下方式构建的：

-index.html

- / CSS

- / IMG

然后您想要将代码更改为：

@media screen and (max-width: 767px) {   
 #main-img{
    background-image: url("../img/Well-Being-For-Kids.jpg");
 } 
}
@media screen and (min-width: 768px) {      
 #main-img{      
    background-image: url("../img/Well-Being-For-Kids.jpg");
 }
}

Answer 2

我已经在另一篇文章中给出了答案。访问https://stackoverflow.com/a/54397999/2165382

以防帖子被删除。

我们已经具有根据屏幕尺寸加载图像的功能。您不需要为此的CSS Media查询。因为要加载来自数据库的动态图像，您无法即时创建媒体查询。

解决方案：

使用srcset属性

示例：

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">

在上面的代码中，您需要定义的只是宽度大小，然后以逗号分隔图像。

希望它会有所帮助：-）

根据屏幕尺寸更改LOCAL图像来源

2 个答案: