[Résolu] Image responsive, avec image à l'intérieur

Bonjour,

Mon problème: j'ai une image avec des points à l'intérieur.
Ces points sont des images, positionnés en "position: absolute"
Je souhaite rendre responsive l'image principale.
Les points doivent être responsive et prendre leur place à l'endroit exact sur l'image d'origine redimensionnée.
En gros comment recalculer la position de ces points?
Existe-il une solution?
En Javascript sans doute, mais je n'ai rien trouvé de performant...

Merci
Modifié par EVonZ (30 Jun 2017 - 11:11)

Bonjour.

En utilisant des pourcentages pour positionner les "points" ?

Non, le left reste ok, mais le top bouge...
À noter que j'utilise Bootstrap.

ton code est-il testable quelque part ? sur codepend ? jsfiddle ? autre site ?

<div class="container-fluid text-center">    
  <div class="row content">
    <div class="col-sm-12">
      <img src=".../images/image001.png" alt="IMG Responsive" class="img-responsive">
      <img src=".../images/image002.png" alt="IMG Responsive" class="img-responsive" style="position:absolute; left:30px; top:50px;">
    </div>
  </div>
</div>

L'image 001 fait 800x600px
L'image 002 fait 20x20px (c'est juste un rond rouge)
Si on 'responsive' l'image 001 de moitié, c'est à dire 400x300, l'image 002 devrait faire 10x10 px et se trouver en left:15px et top:25px.....non?
Modifié par EVonZ (30 Jun 2017 - 16:32)

je sais pas.. manque bcp de chose à ton code. met le sur codepen ou jsfiddle

J'ai juste mis le centre de mon Bootstrap...sinon il me faut nettoyer le code de tout Angular et cie!!
En fait je veux faire un truc comme ça: http://jsfiddle.net/kurthakd/

Mais ça ne fonctionne pas (img à la place des link a)
Les points rouge se déplacent lors du responsive...

ils se déplacent pas justement ils sont fixent..
parce qu'ils ont une margin en pixel et non en % comme Zelena te l'a indiqué.
Modifié par JENCAL (30 Jun 2017 - 15:52)

Oui, en fait ils ne se déplacent pas...
J'aimerais qu'ils suivent le redimensionnement, tout en se redimensionnant eux-même....
Google est mon ami...mais je ne trouve rien, ni en jQuery, ni en JS pur...
Si quelqu'un a une idée...je prends!
Modifié par EVonZ (30 Jun 2017 - 16:03)

Je crois que ça doit être ça: http://jsfiddle.net/r8rFc/448/

Oui c'est la solution,

les images sont en pourcentage :

    position: absolute;
    width: 2%;
    height: 3%;
    top: 15%;
    left: 20%;

Donc en faite il faudrait mettre une div en 800x600 qui contient ton image ET une autre div avec

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

dans cette div tu peux mettre ton image rouge avec

position: absolute;
    width: 2%;
    height: 3%;
    top: 35%;
    left: 45%;

et à toi de jouer avec les pourcentages

Et ça aussi, très important, le parent en relative et le max-width défini!

.img-overlay {
    position: relative;
    max-width: 640px;
}

Modifié par EVonZ (30 Jun 2017 - 16:32)

Oui, il faut maintenant que je teste avec un trentaine de points....ça va le faire!
Modifié par EVonZ (03 Jul 2017 - 08:18)