Question

我有一个非常高分辨率的图像（例如this one）需要查看。

我想将其放入浏览器屏幕或让用户在图片周围滚动（不更改图像）。

做这些事情的好方法是什么？我猜测有一种方法可以用CSS（使用宽度/高度）或Javascript来做到这一点。我只是想知道什么是其他解决方案或使用CSS / Javascript的最佳解决方案。

这样做的另一个好方法是使用某种类型的控件，允许用户放大/缩小并在高分辨率图像周围移动。我应该只使用GoogleMaps API吗？

Answer 1

我没试过这个，但这是一个例子： http://www.visual-blast.com/javascript/panoramic-photoviewer-in-javascript/ 此外，只是谷歌开源照片管理的一些例子和想法。另一种选择是使用闪光灯。使用嵌入式闪存模块可以做到这一点。如果您需要创意，可能还有一些开源Flash照片浏览器。

Answer 2

要适合浏览器窗口，您可以使用：

 var yourImage = document.getElementById('imageid');   
 yourImage.style.width = window.innerWidth+"px";

或循环浏览所有图像

var yourImages = document.getElementsByTagName('img');
for(var i = 0; i < yourImages.length;i++){    
     yourImages[i].style.width = window.innerWidth+"px";   
}

Answer 3

最好的方法是使用免费的Google Maps API。使用众多瓷砖切割机中的一个切割图像，然后像谷歌地图一样显示高分辨率照片 - 人们可以放大，缩小和平移。像这样削减你的形象也会让你更难偷走！

Read this blog post for more info

显示高分辨率图像

3 个答案: