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" />？

修改啊，我现在知道你的意思了。就像David Thomas所说，这取决于浏览器。如果您希望图片显示为fullsize，则无法直接链接到图像。只使用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>

但最终这不是真正的方法。最好的办法是让用户选择显示事物的方式，不要强迫他们使用。如果它们以较低的分辨率工作并且您以完整尺寸显示巨大的图像，则他们无法更改它。最好只链接到图像，如果用户决定他/她想要全屏查看，他们可以点击图像，以便浏览器调整它的大小。

Answer 3

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

此外，要完全显示它，它不应该固定在任何地方。只需将您的图片立即发布到<body>代码中。

Answer 4

使用FullSize.html和

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

显示带有该文件链接的tumb

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

如何显示完整尺寸的图像

4 个答案: