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 html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
<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>
Et voici la partie de mon css :
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
img
{
vertical-align:top;
with : 100%;
height: auto;
box-sizing: border-box;
max-width: 100%;
}
 
header{
display:inline;
with:100%;
}
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 html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
 <header>
 <nobr>
 <img src="/refcom/images/logo1 " alt="bannière accueil" />
 <a href="/lien.jsp"><img src="/logo2 gif"></a>
 </nobr>
</header>
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 html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
<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>