css redimensionner 2 images horizontales

Question

Je suis coincé sur un morceau de code assez basique et je pense que je ne dois pas connaître la syntaxe correcte.

Je veux afficher 2 images côte à côte (horizontalement SOx | X) et qu'il est automatiquement redimensionne en fonction de la largeur de l'écran ...

Mon problème est que la deuxième image lorsque l'écran est réduit en largeur tombe en dessous de la première. J'ai essayé de régler la hauteur de mon DIV Contener mais la seconde image en sort ... Savez-vous comment réparer ça s'il vous plait? 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> 

Answer 1

Utilisez position: relative; sur votre emballage et width: 50%; float: left; sur vos images

<div style="position: relative; float: left; width: 100%; border: solid 1px #000"> 
    <img src="yourPath.jpg" style="float: left; width:50%;"> 
    <img src="yourPath.jpg" style="float: left; width:50%;"> 
</div> 

Answer 2

besoins width: 50%; et float:left; pour l'image gauche

Heres un jsFiddle pour elle: http://jsfiddle.net/vwMWn/18/

Votre code:

<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:50%; float:left"/> 
    <img src="http://chezsilvia.c.h.pic.centerblog.net/o/3963dc3b.jpg" style="max-width:50%;"/> 
</div>