Html @媒体查询和图像交换

我希望在调整浏览器大小时，网站中的图像完全改变

我一直在使用媒体查询，但我似乎没有弄对。

---

有什么想法/提示吗？

以后请添加您尝试过的代码

如果是

图像

标记，则可以使用类。在页面加载时隐藏第二个图像，并以特定屏幕大小显示+隐藏图像1，如下所示：

HTML

<img src="image.jpg" class="image1"/>
<img src="image.jpg" class="image2"/>

<div class="example"></div>

或 如果是

背景图像

，只需交换图像即可：

HTML

<img src="image.jpg" class="image1"/>
<img src="image.jpg" class="image2"/>

<div class="example"></div>

---

您可以使用

内容

属性插入图像。然而，像这样包含的图像可能很难进行风格设计。（在调整浏览器大小之前，全屏运行代码段）

@媒体屏幕和（最大宽度：479px）{
部门经理{
显示：无；
}
div：：之前{
内容：url（“https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66");
}
}

调整此窗口的大小以查看图像更改

---

这可以使用HTML5

图片

元素来完成，该元素不需要CSS来更改指定媒体查询中的

img

元素。如果你对这种方法感兴趣，一定要注意它的不包括IE，尽管对于较旧的浏览器有一个更好的选择

调整窗口大小
欢迎阅读-如果你是新的，考虑阅读，以加快速度如何制定好的问题在这里。对于初学者来说，显示您当前拥有的代码将使我们更容易找到问题所在。这个问题。@aaratikkapeddi不客气。如果这是您正在寻找的答案，您是否可以检查此问题是否已解决？第一个解决方案是否会导致浏览器下载不需要的图像？@Ally浏览器不会下载图像，除非它们需要显示them@vivoconunxino：也许每个都是加载的？在第一个例子中，你应该有不同的src（正如你的源代码所展示的那样）。我通常使用下面描述的CSS方法，但是当你知道你想在不同的媒体中裁剪不同的特写照片时，这个方法似乎是一个很好的方法。使用
@media
和
display:none表示图像仍在加载中。即使您采用移动优先的方法，您仍然有更大的显示器同时加载两幅图像，而不是1幅。此方法实际上只获取加载时所需的图像，然后随着视口的变化加载其他大小的图像。支持@ekfuhrmann:justice@ekfuhrmann是正确的。所有说不用显示的人实际上都是糟糕的前端开发人员。他不会雇用我。回答得好，埃克夫曼！