我希望有一个静态的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
答案 0 :(得分:2)
您可以添加一个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" />
&#13;