响应式图像替换

Question

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

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

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

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

对不起，如果这有点难以理解，但如果有人知道我在说什么，并且知道显示响应图像和替换图像的最佳方式，那就太好了。

Answer 1

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

例子：

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