1485 sujets

Web Mobile et responsive web design

[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)

<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)
J'ai juste mis le centre de mon Bootstrap...sinon il me faut nettoyer le code de tout Angular et cie!! Smiley cligne
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 Smiley cligne 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... Smiley rolleyes Smiley langue
J'aimerais qu'ils suivent le redimensionnement, tout en se redimensionnant eux-même.... Smiley lol
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)
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! Smiley lol
Modifié par EVonZ (03 Jul 2017 - 08:18)
Sujet clos
Aller à