Définir et limiter les tailles

Limiter la taille d'un bloc

Etant donné que nous avons vu rapidement l'overflow dans l'étape précédente, ce début d'étape ne sera finalement qu'un rappel sur son fonctionnement. L'overflow est donc un moyen de bloquer la taille d'un bloc, mais il n'est pas toujours nécessaire. En effet, si vous limitez ou imposez une largeur à un bloc mais que vous n'imposez pas de hauteur, le bloc s'étirera autant que nécessaire pour afficher votre texte sans nécessiter d'overflow.

1) Imposer une largeur et limiter la largeur.

Cela parait être la même chose, mais ça ne l'est pas. Imposer une largueur signifie que le bloc fera exactement la taille donnée, quel que soit le contenu. Au contraire, limiter une largeur signifie qu'il sera impossible que le bloc fasse plus que la taille indiquée... mais dans l'absolu, la largeur peut être inférieure.



Vous savez imposer une largeur :

Code:

width: 500px;

Ici votre bloc fera 500px de largeur. Cependant, pour verrouiller cette largeur à 500px quel que soit le contenu (une image trop large par exemple) il va falloir exiger que la largeur maximale soit de 500px. Pour cela, voici le css adapté :

Code:

max-width: 500px;

Ainsi, la largeur ne pourra pas dépasser les 500px.



Avec le même raisonnement, il est possible d'imposer à un bloc une largeur minimale, mais lui permettre de s'élargir si besoin. Pour cela, nous utilisons la propriété css suivante :

Code:

min-width

Dans ce cas là, votre bloc fera au moins 500px, mais il peut s'élargir au besoin.

2) L'overflow pour gérer ce qui dépasse du bloc :

Comme expliqué à l'étape précédente, l'overflow permet de gérer ce qui va sortir de notre cadre, que ce soit du texte ou une image, grâce à un déplacement vertical ou horizontal.



Il peut être utilisé pour limiter la hauteur, la largeur, ou même les deux. Il devient extrêmement utile pour  éviter de déformer vos bloc, faire deux cadres textes de la même longueur côté à côté en ayant pourtant des longueurs de texte différentes, etc... Vous le verrez dans les fiches de présentations RP, fiches de relations ou fiches pub, mais aussi sur les forum pour les descriptions des catégories par exemple, ce qui permet d'uniformiser leur hauteur pour qu'elles fassent toutes la même.

Redimensionner une image en utilisant le CSS

De la même façon que vous pouvez imposer une largeur et une hauteur à vos blocs, vous pouvez faire de même avec les images, n'importe lesquelles. C'est pratique pour que toutes fassent la même taille sans s'embêter à ouvrir un logiciel de retouche d'image.



Comme pour un bloc, vous pouvez choisir d'imposer une taille précise, ou bien une taille maximale, permettant à l'image d'être plus petite, et donc ne la bloquant à la taille demandée que si elle est à l'origine plus grande que cette taille.

Il est possible de faire cela pour la largeur, ou pour la hauteur.




Voici comment modifier la largeur ou la hauteur d'une image, normalement vous connaissez déjà une façon avec le CSS et l'attribut "style", mais je vous donne également la seconde méthode :

Code:

<img src="adresse.jpg" alt="" style="width: 200px;" />
ou
<img src="adresse.jpg" alt="" width="200" />

L'image ci-dessus a donc sa largeur imposée à 200 pixels.

Code:

<img src="adresse.jpg" alt="" style="height: 100px;" />
ou
<img src="adresse.jpg" alt="" height="100" />

L'image ci-dessus a donc sa hauteur imposée à 100 pixels.

Exemple d'une image avec largeur + hauteur modifiés, ce qui déforme l'image :



La même image avec dans le premier cas seulement la largeur de modifiée (à 400px), et dans le deuxième cas seulement la hauteur (à 100px) :





(Remarque : sur le forum l'image apparait déformée à cause du système de redimensionnement des images dans les messages, forçant la largeur à 600px.)

Vous pouvez également mettre une taille butoir, c'est à dire que l'image que vous mettrez dans votre code pourra être plus petite que la taille butoir, mais pas plus grande. Cela se fait exactement comme avec un bloc :

Code:

max-width: 200px;
max-height: 200px;

... et il va de soit que vous pouvez aussi mettre une taille minimale en dessous de laquelle la taille de votre image ne pourra pas aller, mais il est plus rare de l'utiliser.

Code:

min-width: 200px;
min-height: 200px;

Limiter la taille d'une image avec une "zone image"

Cela permet de limiter ce que l'on voit d'une image à une certaine taille, ainsi, si l'image est plus grande le surplus ne se verra pas. C'est une méthode très utilisées pour les avatars dans les feuilles de présentation, par exemple.
Deux solutions vont vous être proposées, généralement, c'est la première qui est utilisées dans les présentations et autres, peut-être car elle est un peu plus simple, cependant je vous s'indique les deux méthodes, à vous de choisir laquelle vous convient le mieux, sachant qu'elles sont toutes deux leur particularité. Ainsi, même si la seconde vous parait complexe ou ne pas convenir, elle peut être la seule valable dans d'autres cas. Voilà pourquoi je vous en parle.

1) Image en fond

En effet, le moyen le plus simple d'afficher une image en imposant sa taille sans risquer de la déformer c'est de mettre cette image en guise de fond d'un bloc qui fera, lui, la taille voulue. Ca ne vous parait pas clair ? Ca le sera certainement plus bas...

Voici, comme vous savez déjà le faire, un bloc étant de la taille d'un avatar RPG classique (autrement dit 200x320px).

Code:

<div style="width: 200px; height: 320px; margin: auto; background-color: white; border: 3px solid black;"></div>

J'ai ajouté une couleur de fond blanche et un cadre noir pour plus de clarté.
Maintenant, il suffit d'y mettre une image en fond, qui fasse la taille demandée, donc 200x320, ce qui est généralement ce que les membres doivent mettre dans le profil RPG.

Code:

<div style="width: 200px; height: 320px; margin: auto; background: url(http://img4.hostingpics.net/pics/153139HenriCavill8.jpg) center center no-repeat white; border: 3px solid black;"></div>

Il faudra donc modifier l'image directement dans le code CSS. Ca peut paraitre tordu, mais la majorité des fiches de présentation/relations de personnage sont faites ainsi et les gens savent les modifier.



Et bien elle est gérée comme un fond, donc se comporte comme tel. Si elle est trop large, le surplus ne se verra pas, et bien évidemment le bloc ne sera pas déformé. Si par contre l'image est trop petite, on verra la couleur de fond, à moins que vous ne fassiez se répéter l'image en mosaique à l'intérieur. Quoi qu'il en soit, si vous exigez une image d'une taille précise dans votre cadre, c'est à vos membres de s'adapter et d'afficher une image à la bonne taille !

2) Image redimensionnée dans un bloc

C'est pour cette solution-là qu'il sera nécessaire d'utiliser l'overflow. Nous allons donc afficher notre bloc, exactement comme tout à l'heure, mais à la place que l'image soit en guise de fond, elle sera vraiment dans le bloc. Voici le code en guise d'exemple :

Code:

<div style="width: 200px; height: 320px; margin: auto; background: white; border: 3px solid black;"><img src="http://img4.hostingpics.net/pics/153139HenriCavill8.jpg" alt="" /></div>

Oui ! Tout à fait. C'est pourquoi nous allons ajouter un overflow. Et pour masquer tout ce qui dépasse, la valeur de la propriété overflow doit être... ? ... doit être ? ...
"hidden" ! Bien ! :)

Code:

<div style="width: 200px; height: 320px; margin: auto; background: white; border: 3px solid black; overflow: hidden;"><img src="http://1.bp.blogspot.com/-lLvxXJV3HQk/TbooaVXmEqI/AAAAAAAACYg/yr8X1WtaBcE/s400/1980s_unknown019.jpg" alt="" /></div>

(Lien de l'image)

Et voilà ! Vous avez deux méthodes, chacune avec ses qualités pour définir une zone d'image, pour un avatar par exemple.



Etape précédenteEtape suivante

Merci pour ce tutoriel qui nous aide grandement, mais j'avais une question par-rapport à un codage, dans celui qui suit :

Code:

    <img src="adresse.jpg" alt="" style="width: 200px;" />
    ou
    <img src="adresse.jpg" alt="" width="200" />

À quoi peut servir la balise :

Code:

alt=""

Merci d'avance pour la réponse ! :)

Bonjour,
Elle donne un nom à l'image. Tout simplement (:

Juste pour rajouter une petite précision, pour le alt ici on parle d'attribut.
En fait img est la balise, et alt est l'un de ses attributs (^-^).

Je te le précise, car en général une fois qu'on prend une habitude... On a du mal à s'en défaire :p. Et puis c'est plus simple d'avoir le bon mot (même si au début on a tendance à tout mélanger ♥).

Et effectivement, ça sert à donner un nom à l'image, pour dire son contenu. C'est à dire que si l'image ne s'affiche pas pour une raison X, ce texte là pourra s'afficher à la place. C'est aussi utile si quelqu'un utilise un lecteur d'écran, mais aussi pour les robots qui parcourent les pages
Par exemple pour le bouton "Nouveau sujet", le code de l'image est celui ci, on peut lire "Poster un nouveau sujet".

Code:

<img alt="Poster un nouveau sujet" class="i_post" src="http://img4.hostingpics.net/pics/508055nouveau.png">

Si c'est une image purement décorative, il n'y a pas besoin de remplir le contenu de l'attribut alt, on peut le laisser vide, comme sur l'exemple que tu as cité (^-^)

D'accord, je comprends beaucoup mieux comme ça ! Je vous remercie.

Okhmhaka a écrit:L'image ci-dessus a donc sa hauteur imposée à 100 pixels.

Exemple d'une image avec largeur + hauteur modifiés, ce qui déforme l'image :

Bonjour !

Dans un bloc à valeur en pourcentage, y aurait-il un code pour garder les proportions de l'image pour ne pas perdre l'overflow et sans qu'elle soit déformé (même si celui-ci laisse entrevoir la couleur de fond) ?

Je test ici, j'ai essayé de faire le codage seule pour m'entraîner:

Code:

<dive style= "weight: 200px; height: 320px; margin: auto; background: url(http://r31.imgfast.net/users/3113/41/34/56/avatars/435-98.jpg) center center no-repeat #FFFFFF; border: 3px solid #000000"> </div>

Merci pour ces explications,

Voilà ce que j'obtiens avec les deux méthodes en test ^^