给定以下图片链接:
<a href="path/to/img.jpg">Title</a>
指示缩略图位置的语义最合理的方法是什么?
到目前为止,我能想到的最好的方法是使用data-
如下属性:
<a href="path/to/img.jpg" data-thumb="path/to/thumb.jpg">Title</a>
但是,它在语义上似乎不太合理。有没有更好或更正确的方法来做到这一点?
为什么不使用<img>
元素?你可以给它一个类来表明它是一个缩略图,如果你需要的话,可以通过渐进增强来隐藏它。这样,图像的缩略图将在没有 JavaScript/CSS 的情况下显示:
<a href="path/to/img.jpg">
<img src="path/to/thumbnail.jpg" class="thumb" alt="Thumbnail" />
Title
</a>
还是我太天真了?
<a href="path/to/img_thumb.jpg">Title</a>
简单并保持原始路径不变,同时只需添加后缀以指示图像是缩略图。我们一直在我们的网站上使用它,它使事情变得容易。