css - 在响应式设计中更改 img src？

Question

我即将编写一个可能包含三种不同“状态”的响应式布局。

古怪的部分是很多文本，例如菜单项将是图像 – 这不是我的想法，恐怕我无法改变。

由于对于每个状态(例如，在最小状态下，菜单变成 float 按钮而不是常规标题)，除了大小之外，图像会略有不同，因此我需要切换图像，而不是仅仅缩放相同的图像。

如果不是这样，我可能会选择“adaptive-images.com”。

因此，我需要一些关于最佳实践解决方案的意见。

我能想到的:

• 加载图像作为背景 – 感觉有点脏。

• 插入两个版本并切换 css 显示属性——非常肮脏!

• 编写一个设置所有 img 链接的 javascript – 感觉有点矫枉过正？

有人提出好的解决方案吗？ :)

Answer 1

其他选项。不需要脚本，只需要 CSS。

HTML

<div id="mydiv">
    <img src="picture.png" class="image_full">
    <img src="picture_mobile.png"  class="image_mobile">
</div>

CSS

.image_full{
   display:block;
  }

 .image_mobile{
  display:none;
 }

@media (max-width: 640px) and (min-width: 320px){
  .image_full{
   display:none;
  }

  .image_mobile{
   display:block;
  }
}