使用srcset更改图像链接而不是图像本身？

Question

我希望有一个静态的100px缩略图（它在所有屏幕尺寸中都是100px），点击将显示相同图像的较大版本（取决于屏幕尺寸）。因此，缩略图基本上可以作为#logo { background-image: url('/wzgorzeSmakowMarcin/logo/logoMedium.png'); background-repeat: no-repeat; width: 431px; height: 146px; margin-left: 15px; background-size: contain; background-position: center center; } 变体的链接。这可能吗？

srcset

Answer 1

您可以添加一个javascript事件侦听器，用于侦听图像上的单击。

单击图像后，您可以添加srcset属性。

浏览器将完成剩下的工作。

示例：

＆＃13;

＆＃13;

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);

＆＃13;

<img class="thumbnail" src="http://placehold.it/100x100" alt="Thumbnail - Click Me" />

＆＃13;

＆＃13;

＆＃13;