如何显示图像的全尺寸

问题描述：

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

当点击上面的拇指时，浏览器将显示FullSize.jpg的大小以适应浏览器的客户机窗口，当光标移到它上面时，“+”将出现以表示点击图片将显示完整大小。我想要做的是首先显示图像的全尺寸，而不需要用户点击它以获得完整的尺寸。如何做到这一点？如何显示图像的全尺寸

答

显示全部图像：<img alt="full image" src="FullSize.jpg" />？

编辑啊，我现在知道你的意思了。就像David Thomas所说，这取决于浏览器。如果您希望图片显示为全尺寸，则无法直接链接到图像。随着HTML只有你可以做这样的事情：

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

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

fullsize.html：

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

但最终这不是真的要走的路。最好的做法是让用户选择显示内容的方式，而不是强制显示内容。如果他们以较低的分辨率工作，并以全尺寸显示巨大的图像，他们无法改变它。最好只是链接到图像，如果用户决定他/她想要全屏查看，他们可以点击图像，以便浏览器调整大小。

答

只需删除围绕图像的锚点</a>即可。如果您想“保证”以全尺寸显示，请在<img />标记中添加width="100%"。

此外，要充分展示它，它不应该锚定在任何地方。只需将您的图片立即标为<body>标签。

我不能显示它的全尺寸，它只有拇指的空间。 – Jim 2010-10-02 18:04:46

我假设有一个CSS（类似于'img {...}'），它已被赋予固定的宽度，因此您的图像不会以全屏显示。注释掉CSS中的'width'声明。 – 2010-10-02 21:46:26

@Jim，没有空间显示完整大小的图像，但你想显示全尺寸的图像？不计算... – Alec 2010-10-03 17:38:57

答

创建一个页面FullSize.html与<img src="FullSize.jpg"/>和

显示tumb与链接到该文件

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

答

不幸的是，你的描述是浏览器的UI功能（或“错误”，这取决于您的的观点），并且只能由用户启用/禁用。通常通过“编辑偏好”选项。

只有当图像的全尺寸大于视口时才会这样做，这样用户就可以看到完整的图像而无需滚动，它完成了“活动”，因此图像本身未被压缩/调整大小，只是缩放以适应视口。用户只需点击一次即可立即进行直观的操作。我不确定，如果有解决方法，我可以推荐这样一种技术，尤其是因为它是一个我更快乐的功能，作为开发者和用户，比我不满意通过它。

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

如何显示图像的全尺寸

相关推荐