Html 如何显示全尺寸图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3846847/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display an image full size
提问by Jim
<a href="FullSize.jpg"><img alt="thumb" src="thumb.jpg"></a>
When the above thumb is clicked the browser will display FullSize.jpg sized to fit the client window of the browser and when the cursor moves over it a '+' will appear to signify that clicking the image will display it full size. What I want to do is display the image full size in the first place, without requiring the user to click it to get full size. How does one do this?
当点击上面的拇指时，浏览器将显示 FullSize.jpg 大小以适合浏览器的客户端窗口，当光标移动到它上面时，将出现一个“+”，表示单击图像将显示全尺寸。我想要做的是首先显示全尺寸图像，而不需要用户单击它以获得全尺寸。如何做到这一点？
回答by David says reinstate Monica
Unfortunately, what you describe is a browser UI feature (or 'bug,' depending on your point of view), and can only be enabled/disabled by the user. Usually via the 'edit preferences' options.
不幸的是，您所描述的是浏览器 UI 功能（或“错误”，取决于您的观点），并且只能由用户启用/禁用。通常通过“编辑首选项”选项。
It's only done if the image at its full size is larger than the view-port, so that the user can see the full image without having to scroll around, it's done 'live' so the image itself isn't compressed/resized, just scaled to fit the viewport. It's also immediately, and intuitively, un-doable by the user in just one-click. I'm not sure that, if there were a way around it, I could recommend such a technique, especially since it's a feature that I'm happy with far more often, as a developer anduser, than I'm displeased by it.
仅当图像的完整尺寸大于视口时才会完成，以便用户无需滚动即可看到完整图像，它是“实时”完成的，因此图像本身不会被压缩/调整大小，只是缩放以适应视口。用户只需单击一下，就可以立即、直观地进行操作。我不确定，如果有办法解决它，我可以推荐这样一种技术，特别是因为它是我作为开发人员和用户更喜欢的功能，而不是我对它不满意.
The only way around it, that I can think of is to find the image's native height/width, wrap it in a div with those dimensions (plus a little padding). I'm not sure that it will work, but it's the only thing that comes to mind now I'm thinking about it.
我能想到的唯一解决方法是找到图像的原始高度/宽度，将其包装在具有这些尺寸的 div 中（加上一点填充）。我不确定它会起作用，但这是我现在唯一想到的事情。
回答by Alec
Display the full image: <img alt="full image" src="FullSize.jpg" />?
显示完整图像：<img alt="full image" src="FullSize.jpg" />?
EditAh, I now know what you mean. Like David Thomas said, this depends on the browser. If you want the picture to be shown fullsize you can't link to the image directly. With HTML only you can do something like this:
编辑啊，我现在知道你的意思了。就像 David Thomas 所说，这取决于浏览器。如果您希望图片以全尺寸显示，则无法直接链接到图片。仅使用 HTML，您可以执行以下操作：
<a href=fullsize.html"><img alt="thumb" src="thumb.jpg"></a>This will open a new HTML page, which will display your image:
这将打开一个新的 HTML 页面，其中将显示您的图像：
fullsize.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>But in the end this isn't really the way to go. The best thing to do is to give the user the choice of how things are displayed and don't force something on them. If they work on a lower resolution and you display a huge image in full size, there's no way for them to change it. Best to just link to the image and if the user decides he/she wants to view it full screen, they can click the image so the browser resizes it.
但最终这并不是真正要走的路。最好的办法是让用户选择显示内容的方式，不要强加于他们。如果他们以较低的分辨率工作并且您以全尺寸显示大图像，则他们无法更改它。最好只链接到图像，如果用户决定他/她想要全屏查看，他们可以单击图像以便浏览器调整其大小。
回答by Buhake Sindi
Just remove the anchor </a>that surrounds your image. If you want to "guarantee" to display it at full size, add width="100%"in your <img />tag.
只需删除</a>围绕图像的锚点。如果您想“保证”以全尺寸显示它，请添加width="100%"您的<img />标签。
Also, to fully display it, it shouldn't be anchored anywhere. Just post your image immediatelyin a <body>tag.
此外，为了完全显示它，它不应该被锚定在任何地方。只需立即在<body>标签中发布您的图片。
回答by jcubic
create a page FullSize.htmlwith <img src="FullSize.jpg"/>and
FullSize.html用<img src="FullSize.jpg"/>和创建一个页面
display tumb with link to that file
显示带有该文件链接的 tumb
<a href="FullSize.html"><img alt="thumb" src="thumb.jpg"></a>
<a href="FullSize.html"><img alt="thumb" src="thumb.jpg"></a>
