Javascript：调整图片大小以适应窗口，然后切换全尺寸并在点击时调整大小？

Question

我正在尝试创建一个小代码段，以允许调整已加载的图像以适应用户的分辨率。然后允许用户在实际图像大小和调整后的图像大小之间切换以获得分辨率。这是我到目前为止所得到的：

<img src="<?=$file['direct_url']?>" border="0" onload="if(this.width>screen.width/1.5) {this.width=screen.width/1.5;this.alt='Click image to view full size';}window.status=this.width;" onmouseover="if(this.alt) this.style.cursor='hand';" onclick="if (this.width=screen.width/1.5) {this.width=screen.width*1.5} else {this.width=screen.width/1.5}">

非常感谢任何帮助！

Answer 1

我认为您唯一需要的是自定义属性，您可以使用/ height存储原始图像。

<img originalwidth="100" originalheight="100" />

您可以使用以下方法检索/使用这些值：

this.getAttribute('originalwidth');
this.getAttribute('originalheight');