我想要一个静态的100px缩略图（在所有屏幕尺寸中均为100px），然后单击以显示相同图像的较大版本（取决于屏幕尺寸）。因此，缩略图实际上将充当srcset变体的链接。这可能吗？
<a href="/">
<img src="thumb.jpg">
</a>
<img src="default.jpg" class="thumbnail" srcset="small.jpg 600w, medium.jpg 1000w large.jpg 2000w">
您可以添加一个javascript事件侦听器，以侦听对图像的单击。
单击图像后，可以添加srcset属性。
浏览器将完成其余的工作。
例子：
var thumbnail = document.getElementsByClassName('thumbnail')[0];
var srcsetAttribute = document.createAttribute('srcset');
var srcsetValue = 'http://placehold.it/200x100 600w, http://placehold.it/300x100 1000w, http://placehold.it/600x100 2000w';
srcsetAttribute.value = srcsetValue;
function addSrcset() {
this.setAttributeNode(srcsetAttribute);
}
thumbnail.addEventListener('click',addSrcset,false);<img class="thumbnail" src="http://placehold.it/100x100" alt="Thumbnail - Click Me" />本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句