Affichage d'une image haute résolution

Question

J'ai une image en très haute résolution (par exemple this one) qui doit être affichée.

Je voudrais soit l'adapter dans l'écran du navigateur ou faire défiler l'utilisateur autour de l'image (sans changer l'image).

Quels sont les bons moyens de faire de telles choses? Je suppose qu'il y a un moyen de le faire avec CSS (en utilisant largeur/hauteur) ou Javascript. Je me demande simplement quelles sont les autres solutions ou les meilleures solutions utilisant CSS/Javascript.

Une autre bonne façon de faire cela peut être d'avoir un certain type de contrôle qui permet aux utilisateurs de zoom avant/arrière et de se déplacer dans l'image haute résolution. Devrais-je simplement utiliser l'API GoogleMaps pour cela?

Answer 1

Je ne l'ai pas essayé, mais voici un exemple: http://www.visual-blast.com/javascript/panoramic-photoviewer-in-javascript/ Aussi, juste google gestion photo open source pour quelques exemples et idées. Une autre option consiste à utiliser le flash. Il est trivial de le faire avec un module flash intégré. Il y a probablement des photoviewers flash open source aussi, si vous avez besoin d'idées.

Answer 2

pour le montage dans la fenêtre du navigateur, vous pouvez utiliser ceci:

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

ou boucle à travers toutes les images

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

Answer 3

La meilleure façon est d'utiliser l'API Google Maps gratuite. Utilisez l'une des nombreuses découpeuses de tuiles pour découper votre image, puis montrez votre photo haute résolution comme une carte Google. Les gens peuvent zoomer, dézoomer et faire un panoramique. Couper votre image comme ça rend plus difficile à voler aussi!

Read this blog post for more info