Des images qui s'adaptent a la fenetre sur une ligne html css

Fermé
aml - 15 oct. 2014 à 08:03
Bonjour,

Je suis en train de faire un site en html et j'ai un soucie :

Je cherche à faire une entete avec deux images qui s'adaptent à la taille de la fenetre (comptabilité avec

pc et tablette par exemple)

Pour l'instant ces deux images changent de taille lorsque je change la taille de la fenêtre de mon

navigateur (grace à mon css : img{ With : 100% ; Height : auto ;} mais elles ne restent pas sur la

même ligne , l'une viens au dessous de l'autre... Or j'aimerais que ces deux images restent sur la

même ligne (chacune occupant 50% de la fenetre ) tout en changeant automatiquement de taille ...

J'ai vraiment essayer pas mal de solution mais rien n'y fait

Voici la partie de mon code en html:

[CODE]<header>

<img src="/logo1.gif" alt="bannière accueil" style= "left: 0%;" />

<a href="/lien.jsp"><img src="logo2.gif" style=" left: 50%;"></a>

</header>
/CODE
Et voici la partie de mon css :
[CODE]
img

{

vertical-align:top;

with : 100%;

height: auto;

box-sizing: border-box;

max-width: 100%;

}

header{

display:inline;

with:100%;

}
/CODE
J'ai aussi essayé avec la balise <nobr> et les deux images reste sur la meme ligne

mais le logo2 ne se redimensionne pas, par contre logo1 oui.
[CODE]

<header>

<nobr>

<img src="/refcom/images/logo1 " alt="bannière accueil" />

<a href="/lien.jsp"><img src="/logo2 gif"></a>

</nobr>

</header>
/CODE
J'ai aussi essayé avec les tableaux (et je pense que se serait le meilleur moyens)

et les deux images reste sur la même ligne et le tableau s'adapte à l'écran mais

par contre les images elles ne s'adaptent plus (certainement à cause du tableau),
[CODE]
<table width='100%'>

<tr width='100%'>

<td> <img src="/ logo1.gif" alt="bannière accueil" /></td>

<td> <a href="/lien.jsp"><img src="/logo2.gif" border="2" ></a></td>

</tr>

</table>
/CODEows 7 / Firefox 32.0</config>