Comment redimensionner dynamiquement un groupe d'images

Question

J'ai découpé une grande image en morceaux plus gérables et les ai regroupés pour que la grande image soit de nouveau affichée. Je l'ai fait depuis que je voulais que chaque morceau ait un hyper-lien différent. Maintenant, je vois que lorsque je redimensionne les images, l'affichage est brisé en morceaux. J'ai utilisé un pour les mettre tous ensemble mais malheureusement cela ne résout pas le problème. Comment puis-je redimensionner dynamiquement les images sans casser le tout en morceaux?

Ps: Y at-il possibilité de faire les pièces agissent comme une grande image en utilisant div

Answer 1

Vous pouvez simplement utiliser la cartographie CSS sur une image, au lieu de couper l'image en morceaux?

• http://www.w3schools.com/tags/tag_map.asp
• http://www.neopets.com/~Kacizilla

Mise à jour: Pour une image réactive les cartes, il y a deux options - JS/SVG et il est encore possible avec pur CSS:

• JQuery Plugin - http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html
• JavaScript: http://www.andensolutions.com/blog/responsiveImagePaths
• SVG: http://demosthenes.info/blog/760/Create-A-Responsive-Imagemap-With-SVG
• Pure CSS: http://www.cssplay.co.uk/menu/cssplay-responsive-image-map.html

Mise à jour 2:

méthode Pure CSS:

Ce ne est pas vraiment une carte, mais il suit à peu près la même logique:

Vous avez une image sous Relatif positionné Conteneur:

<div class="imageMap"> 
    <img src="yourimage.png" style="position: relative;"> 
    <a href="yourURL" class="yourLink"></a> 
</div> 

Vos liens sont en fait Absolument balises positionnées, qui ont: haut, à gauche (ou toute autre combinaison) + largeur et hauteur. Assurez-vous que vous utilisez pourcentages, de sorte qu'il peut rester réactif.

.yourLink { 
    position: absolute; 
    left: 11%; 
    top: 5%; 
    width: 25%; 
    height: 34%; 
} 

et il y a aussi un éditeur de carte d'image basée JS: http://www.maschek.hu/imagemap/index