Discussion :

[niconeo]

Bonjour,

Je suis bloqué sur une partie de code assez basique je crois et je ne dois pas connaitre la bonne syntaxe.

Je souhaite afficher 2 images cote à cote ( horizontalement donc X|X ) et que celle-ci se retaille automatiquement en fonction de la largeur de l'écran...

Mon problème est que la deuxième image une fois que l'écran se réduit en largeur passe en dessous de la première, ce n'est qu'une fois que les 2 images l'une sous l'autre n'ont plus de place qu'elle change de taille. J'ai essayé de fixer la hauteur de mon contener DIV mais la deuxième image sort carrément de celui-ci... sauriez-vous comment faire svp ? Ci-joint mon morceau de code actuel.

<div style="width:100%;max-height:150px;border:1px solid black;" >
<img src="http://chezsilvia.c.h.pic.centerblog.net/o/3963dc3b.jpg" style="max-width:100%;"/>
<img src="http://chezsilvia.c.h.pic.centerblog.net/o/3963dc3b.jpg" style="max-width:100%;"/>
</div>

[bob633]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div style="width:100%;max-height:150px;border:1px solid black;" >
<img src="http://chezsilvia.c.h.pic.centerblog.net/o/3963dc3b.jpg" style="max-width:100%;"/>
<img src="http://chezsilvia.c.h.pic.centerblog.net/o/3963dc3b.jpg" style="max-width:100%;float:left;"/>
</div>

Essai de rajouter un float:left; sur la deuxième image pour lui dire de rester côte à côte.

Par contre le css direct dans le HTML ...

[niconeo]

Merci pour la réponse, je viens de tester mais cela ne fonctionne pas, j'ai passé l'après midi dessus à testé pas mal de chose

Ps: C'est pour l'exemple le css dans le html

[Candygirl]

Bonjour,

En mettant max-width de 100% tu autorises chaque image à utiliser toute la largeur de leur parent, donc, forcément que leur taille ne diminuera qu'à partir du moment ou leur taille respective est plus grande que le parent.

Si tu veux qu'elles restent côtes à côtes, tu devrais leur attribuer un max-width de 50%.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div style="max-height:150px;border:1px solid black;" >
<img src="http://chezsilvia.c.h.pic.centerblog.net/o/3963dc3b.jpg" style="max-width:50%;float:left;"/>
<img src="http://chezsilvia.c.h.pic.centerblog.net/o/3963dc3b.jpg" style="max-width:50%;"/>
</div>

[niconeo]

Oui c'est bien ça !! Merci pour le coup de main super !