Css 在媒体查询中使用不同图像的大多数语义方法

我需要有不同大小的图像，所以我打算用媒体查询来显示和隐藏图像

如果一个页面上有一个图像的副本，会不会让搜索引擎/特殊屏幕阅读器感到困惑？我是否应该只使用一个图像，而将其余的部分作为div

我在想，这个可以用吗

html:

---

我只是想避免混淆，或者搜索引擎可能会将其视为重复内容的负面分数。

您应该查看响应图像和srcset属性。有很多文档。一个重要的考虑因素是显示：无，即使在背景上，也不一定会阻止所有图像的下载。您可能会发现这个堆栈溢出问题很有趣：和。这是一篇很好的解决方案文章和测试页面

<img class="original-image" alt="This is just a placeholder image!" title="This is the original image, and this is the description!" src="http://placehold.it/200x200.png" />

<div class="zoom2x"></div>
<div class="zoom4x"></div>

.zoom2x {
  width: 400px; 
  height: 400px;
  background-image: url('http://placehold.it/400x400.png');
  display: none;
}

.zoom4x {
  width: 800px; 
  height: 800px;
  background-image: url('http://placehold.it/800x800.png');
  display: none;
}

@media only screen and (min-width: 800px) {
  .original-image, .zoom2x {
    display: none;
  }
  .zoom4x {
    display: block;
  }
}

@media only screen and (min-width: 400px) and (max-width: 799px) {
  .original-image, .zoom4x {
    display: none;
  }
  .zoom2x {
    display: block;
  }
}

@media only screen and (min-width: 200px) and (max-width: 399px) {
  .zoom2x, .zoom4x {
    display: none;
  }
  .original-image {
    display: inline;
  }
}