如何显示完整尺寸的图像

Question

<a href="FullSize.jpg"><img alt="thumb" src="thumb.jpg"></a>

单击上面的拇指时,浏览器将显示FullSize.jpg大小以适合浏览器的客户端窗口,当光标在其上移动时,将显示"+"表示单击图像将显示完整大小.我想要做的是首先显示图像的完整大小,而无需用户单击它以获得完整大小.怎么做到这一点？

Answer 1

不幸的是,您所描述的是浏览器UI功能(或"错误",具体取决于您的观点),并且只能由用户启用/禁用.通常通过"编辑首选项"选项.

仅当图像的全尺寸大于视口时才会这样做,这样用户就可以看到完整的图像而无需滚动,它完成了"实时",因此图像本身不会被压缩/调整大小,只是缩放以适合视口.只需单击一下,用户即刻,直观地无法操作.我不确定,如果有办法绕过它,我可以推荐这样一种技术,特别是因为它是一个我很开心的功能,作为开发人员和用户,比我对它不满意.

围绕它的唯一方法,我能想到的是找到图像的原始高度/宽度,将其包装在具有这些尺寸的div中(加上一点填充).我不确定它会起作用,但这是我现在想到的唯一想法.

Answer 2

显示完整图像：<img alt="full image" src="FullSize.jpg" />?

编辑 啊，我现在知道你的意思了。正如大卫·托马斯所说，这取决于浏览器。如果您希望图片以全尺寸显示，则无法直接链接到该图像。仅使用 HTML，您可以执行以下操作：

<a href=fullsize.html"><img alt="thumb" src="thumb.jpg"></a>

这将打开一个新的 HTML 页面，其中将显示您的图像：

全尺寸.html：

<!DOCTYPE html>
<html>
  <head>
    <title>Your image title</title>
  </head>
  <body>
    <img src="FullSize.jpg" style="width:100%;height:100%;" alt="" />
  </body>
</html>

但最终这并不是真正的出路。最好的办法是让用户选择如何显示内容，而不是强迫他们做一些事情。如果他们以较低的分辨率工作，而您以全尺寸显示巨大的图像，他们就无法更改它。最好只链接到图像，如果用户决定他/她想要全屏查看它，他们可以单击图像，以便浏览器调整其大小。