J'essaye de construire un site Web avec 4 colonnes d'images couvrant toute la page. Lorsque les utilisateurs redimensionnent le navigateur, je veux aussi redimensionner ces images, proportionnalité bien sûr. Mon problème est, je pourrais obtenir ces images pour redimensionner correctement si la fenêtre est plus petite que la taille maximum de largeur pour les images. Cependant, si le navigateur est plus grand, il y a de grands espaces entre les colonnes. Je veux que les images s'empilent les unes contre les autres sans espace entre les deux. Une idée? Ma solution alternative est que si le navigateur est plus grand, je veux que la colonne d'images, empilées les unes contre les autres, soit placée au milieu de la page. Je ne pouvais pas comprendre comment faire ça.Redimensionner les images quand redimensionner la fenêtre sans laisser d'espace entre les images
Les codes sont ci-dessous.
HTML:
<body background="Images/BG_paper_008_dark.jpg">
<div id="header">
<div id="logo"><img src="Images/DTP_logo_final_white.gif" /></div>
<div id="menu">Wedding | Engagement | Family/Portrait | Products | Action | The world through my eyes </div>
</div>
<div id="midbody">
<div id="mainImg1"><img src="Images/FrontPage_L1_Image1.jpg" alt="Horse racing"/>
<img src="Images/FrontPage_L1_Image2.jpg" alt="Horse racing"/></div>
<div id="mainImg2"><img src="Images/FrontPage_L1_Image3.jpg" alt="Horse racing"/>
<img src="Images/FrontPage_L1_Image4.jpg" alt="Horse racing"/> </div>
<div id="mainImg3"><img src="Images/FrontPage_L1_Image5.jpg" alt="Horse racing"/>
<img src="Images/FrontPage_L1_Image6.jpg" alt="Horse racing"/></div>
<div id="mainImg4"><img src="Images/FrontPage_L1_Image7.jpg" alt="Horse racing"/>
<img src="Images/FrontPage_L1_Image8.jpg" alt="Horse racing"/></div>
</div>
</body>
CSS
#midbody {
clear: both;
width: 100%;
text-align: center;
}
#mainImg1 {
width: 25%;
clear: left;
float: left;
text-align: center;
}
#mainImg2 {
width: 25%;
float: left;
text-align: center;
}
#mainImg3 {
width: 25%;
float: left;
text-align: center;
}
#mainImg4 {
width: 25%;
clear: right;
float: left;
text-align: center;
}
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}