html - 响应式图像替换

Question

我正在通过 wordpress 构建一个响应式网站，并希望在 4 种屏幕尺寸上显示 3 个独立的图像，这些图像是横幅广告。

对于我正在使用的主题，我将代码添加到小部件以指定每个单独的 div 和图像。由于我不熟悉响应式设计方式，因此我遇到了一个问题，我不确定理想的解决方法。

css 指定了每个大小的@media，它工作正常，但是我为要显示和不显示的 div 指定不显示的方法不起作用，因为它被基本样式覆盖了。

是否可以通过在图像 src 元素中放置代码来指定每个媒体尺寸显示哪个图像？即

抱歉，如果这有点难以理解，但如果有人了解我的想法并且知道显示响应式图像和替换图像的最佳方式，那就太好了。

Answer 1

您可以为每个图像分配一个唯一的 ID 或使用类名，并在您的媒体查询中使用 display:none;

示例:

@media (max-width: 768px){
  img.myImage{
  display: none;
 }
}