仅设置数据媒体显示的图像的样式

Question

我正在尝试使用data-media创建一些响应式图像，效果非常好。不幸的是，当我尝试设置我的缩略图时，它会逐字显示我不希望的缩略图的所有轮廓，因为该类只应用于所显示的图像。

<p><span class="post-img" data-picture data-alt="An unsual picture" >
    <span class="img-thumbnail" data-src="/generated/2014-03-06-some-article/IMG_1394-13*10-f320b4.jpg"></span>
    <span class="img-thumbnail" data-src="/generated/2014-03-06-some-article/IMG_1394-134*100-f320b4.jpg" data-media="(min-width: 100px)"></span>
    <span class="img-thumbnail" data-src="/generated/2014-03-06-some-article/IMG_1394-201*150-f320b4.jpg" data-media="(min-width: 940px)"></span>
    <noscript>
      <img src="/generated/2014-03-06-some-article/IMG_1394-13*10-f320b4.jpg" alt="An unsual picture">
    </noscript>
  </span></p>

此处显示的示例包含来自Google图片的随机图片：http://codepen.io/anon/pen/bugmi

正如结果所示，显然有三个概述的缩略图充当占位符。这个例子似乎没有像codepen一样工作，但我认为大多数人都会理解这个概念。