Reduction de la taille des images/scrollbar
Greg217
-
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Donc j'ai une page avec plusieurs images en défilement horizontal et qui font 850px de largeur. Voici le code :
<div align="left">
<table width="400" border="0" cellspacing="30" style="">
<tr>
<td><img src="gallerie1/res/F1000011.jpg"/></td>
<td><img src="gallerie1/res/F1000012.JPG"/></td>
<td><img src="gallerie1/res/F1000013.JPG"/></td>
<td><img src="gallerie1/res/F1000014.JPG"/></td>
<td><img src="gallerie1/res/F1000015.JPG"/></td>
</tr>
</table>
</div>
Alors sur mon 24" c'est parfait, les images ont la taille qu'il faut et tout et tout, seulement j'aimerais optimiser le site pour les basses définitions et petits écrans, et l'idéal serait de faire en sorte qu'à partir du moment où apparaît la scrollbar verticale, et ben les images rétrécissent. (et qu'il n'y ait donc plus besoin de scrollbar verticale.
J'ai essayé plein de trucs en css, mais ça merde toujours quelque part.
J'espère avoir été clair !
Auriez vous une solution simple ?
Merci !
Donc j'ai une page avec plusieurs images en défilement horizontal et qui font 850px de largeur. Voici le code :
<div align="left">
<table width="400" border="0" cellspacing="30" style="">
<tr>
<td><img src="gallerie1/res/F1000011.jpg"/></td>
<td><img src="gallerie1/res/F1000012.JPG"/></td>
<td><img src="gallerie1/res/F1000013.JPG"/></td>
<td><img src="gallerie1/res/F1000014.JPG"/></td>
<td><img src="gallerie1/res/F1000015.JPG"/></td>
</tr>
</table>
</div>
Alors sur mon 24" c'est parfait, les images ont la taille qu'il faut et tout et tout, seulement j'aimerais optimiser le site pour les basses définitions et petits écrans, et l'idéal serait de faire en sorte qu'à partir du moment où apparaît la scrollbar verticale, et ben les images rétrécissent. (et qu'il n'y ait donc plus besoin de scrollbar verticale.
J'ai essayé plein de trucs en css, mais ça merde toujours quelque part.
J'espère avoir été clair !
Auriez vous une solution simple ?
Merci !
A voir également:
- Reduction de la taille des images/scrollbar
- Comment réduire la taille d'un fichier - Guide
- Reduction taille image - Guide
- Des images - Guide
- Meilleur site de coupon reduction - Guide
- Afficher taille dossier windows - Guide
3 réponses
Bon déja pour optimiser l'affichage sur faible résolution il faut proscrire l'utilisation des balises table (qui ne sert qu'aux données tabulaires et pas à l'affichage).
<div align="left"> c'est obsolète, pas de align dans un div ca se fait avec css
tu peux faire ca
html
<div class="gallerie"><img src="gallerie1/res/F1000011.jpg"/></div>
<div class="gallerie"><img src="gallerie1/res/F1000012.jpg"/></div>
etc les 3 autres image selon le meme code...
CSS
.gallerie {
width:20%;
float:left;
}
.gallerie img {
width:90%;
margin:0 5%; /*espace entre les images*/
}
<div align="left"> c'est obsolète, pas de align dans un div ca se fait avec css
tu peux faire ca
html
<div class="gallerie"><img src="gallerie1/res/F1000011.jpg"/></div>
<div class="gallerie"><img src="gallerie1/res/F1000012.jpg"/></div>
etc les 3 autres image selon le meme code...
CSS
.gallerie {
width:20%;
float:left;
}
.gallerie img {
width:90%;
margin:0 5%; /*espace entre les images*/
}