Taille d'image qui change
access
-
access -
access -
Bonjour,
Dans un site de loisirs fait en html et des CSS, nous insérons un programme d'activités pour la semaine au format GIF.
Problème:
La première semaine l'image avait une dimension de 842x595px.
La semaine suivante l'image avait une dimension de 841x447px
La semaine d'après l'image avait une dimension de 595x842px.
Comme il est impossible d'avoir une taille d'image constante d'une semaine sur l'autre, je change à chaque fois le width et height dans le CSS, ce que je trouve aberrant, alors que le lien est toujours le même, le document étant toujours baptisé avec le même nom:
background-image:url(../images/activites.jpg);
Voici ma question, comment peut-on construire un CSS pour que quelque soit la taille de l'image elle prenne la place réservée, en privilégiant la largeur allouée par exemple 840px.
De façon à ce que l'image se dimensionne par rapport à la largeur, quel qu'en soit sa largeur réelle et que la hauteur suive automatiquement.
Merci pour votre aide
Dans un site de loisirs fait en html et des CSS, nous insérons un programme d'activités pour la semaine au format GIF.
Problème:
La première semaine l'image avait une dimension de 842x595px.
La semaine suivante l'image avait une dimension de 841x447px
La semaine d'après l'image avait une dimension de 595x842px.
Comme il est impossible d'avoir une taille d'image constante d'une semaine sur l'autre, je change à chaque fois le width et height dans le CSS, ce que je trouve aberrant, alors que le lien est toujours le même, le document étant toujours baptisé avec le même nom:
background-image:url(../images/activites.jpg);
Voici ma question, comment peut-on construire un CSS pour que quelque soit la taille de l'image elle prenne la place réservée, en privilégiant la largeur allouée par exemple 840px.
De façon à ce que l'image se dimensionne par rapport à la largeur, quel qu'en soit sa largeur réelle et que la hauteur suive automatiquement.
Merci pour votre aide
A voir également:
- Taille d'image qui change
- Comment réduire la taille d'un fichier - Guide
- Reduire taille image - Guide
- Change dns - Guide
- Image iso - Guide
- Afficher taille dossier windows - Guide
1 réponse
Bonjour.
Le CSS ne permet pas d'effectuer un traitement sur l'image.
Tu as plusieurs solutions :
1. Utiliser un logiciel de retouche d'image pour la mettre à la bonne largeur.
ImageMagick (logiciel libre et gratuit) te permet de faire ça en lignes de commande (façon DOS), et donc de te faire un petit batch qui redimensionner l'image à la bonne taille.
Sinon, la plupart de logiciels graphiques te permettent de redimensionner une image, relativement simplement...
2. Modifier la page HTML.
Le CSS ne permet pas de modifier la taille d'une image.
Par contre, la balise IMG, en html, oui.
Il "suffit" donc de modifier le html pour avoir l'image dans une balise IMG.
Un exemple valant mieux qu'un long discours :
Tu as ta page HTML qui est comme ça :
Et le CSS :
Il suffit de créer un DIV qui contiendra l'image de fond :
Et dans le CSS, tu défini tes div pour qu'ils se chevauchent...
Le CSS ne permet pas d'effectuer un traitement sur l'image.
Tu as plusieurs solutions :
1. Utiliser un logiciel de retouche d'image pour la mettre à la bonne largeur.
ImageMagick (logiciel libre et gratuit) te permet de faire ça en lignes de commande (façon DOS), et donc de te faire un petit batch qui redimensionner l'image à la bonne taille.
Sinon, la plupart de logiciels graphiques te permettent de redimensionner une image, relativement simplement...
2. Modifier la page HTML.
Le CSS ne permet pas de modifier la taille d'une image.
Par contre, la balise IMG, en html, oui.
Il "suffit" donc de modifier le html pour avoir l'image dans une balise IMG.
Un exemple valant mieux qu'un long discours :
Tu as ta page HTML qui est comme ça :
<div id="contenu"> <h1>Le titre</h1> <p>Des paragraphes avec du texte dedans...</p> </div>
Et le CSS :
#contenu {
background-image:url(../images/activites.jpg);
}
Il suffit de créer un DIV qui contiendra l'image de fond :
<div id="fond"><img src="../images/activites.jpg" /></div> <div id="contenu"> <h1>Le titre</h1> <p>Des paragraphes avec du texte dedans...</p> </div>
Et dans le CSS, tu défini tes div pour qu'ils se chevauchent...
#fond {
width : 100%;
height:100%;
text-align:center; /* Pour placer l'image au centre de l'ecran */
}
/* Définition des propriétés des images contenues dans fond */
#fond img {
border : 0;
width:840px; /* On fixe la largeur... */
}
/*
Les propriétés du contenu principal
Par défaut position est défini à "relative" (le DIV se positionne en fonction de ce qui a déjà été placé dans la page).
posiotion absolute permet de forcer sa position, suivant les valeurs données ensuite. Ici left 0 et top 0 => Le DIV se positionne en haut à gauche de la page.
*/
#contenu {
position:absolute;
left:0;
top:0;
}
très intéressant ton div.
Un grand travail m'attend alors.
on se verra.
Bon journéé.
Je viens d'essayer, ça marche, à part le fait que dans les images redimensionnées le texte est parfois à la limite lisible.
Merci pour cette super solution