Largeur et Hauteur

Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 37 sur 76.

En CSS, les propriétés width et height sont utilisées pour définir les dimensions de la zone de contenu d'un élément. Ces propriétés sont essentielles pour contrôler la taille et la mise en page des éléments sur vos pages web.

Voici la syntaxe de base pour utiliser les propriétés width et height :

selector {
    width: value;
    height: value;
}

width: La largeur de la zone de contenu de l'élément.

height: La hauteur de la zone de contenu de l'élément.

value : La valeur de largeur ou de hauteur souhaitée, qui peut être spécifiée en pixels (px), ems (em), pourcentages (%) ou d'autres unités CSS valides. Vous pouvez également utiliser le mot-clé auto pour laisser le navigateur calculer automatiquement la largeur ou la hauteur en fonction du contenu.

Par exemple :

div {
    width: 300px;
    height: 200px;
}

img {
    width: 100%;
    height: auto;
}

Dans cet exemple, tous les éléments <div> ont une largeur de 300px et une hauteur de 200px, tandis que tous les éléments <img> ont une largeur qui occupe 100 % de la largeur de leur élément parent et une hauteur calculée automatiquement pour conserver le rapport d'aspect.

Défi

Facile

On vous donne un document HTML avec une division (<div>) et une image (<img>). Votre tâche consiste à utiliser les propriétés width et height pour définir les dimensions de ces éléments. Suivez les étapes ci-dessous :

Écrivez une règle CSS qui cible l'élément <div>. Définissez la width sur 400px et la height sur 250px.
Écrivez une règle CSS qui cible l'élément <img>. Définissez la width sur 300px et la height sur auto.

Aide-mémoire

Les propriétés width et height contrôlent les dimensions de la zone de contenu d'un élément :

selector {
    width: value;
    height: value;
}

Les valeurs peuvent être spécifiées en pixels (px), ems (em), pourcentages (%), ou utiliser auto pour un calcul automatique :

div {
    width: 300px;
    height: 200px;
}

img {
    width: 100%;
    height: auto;
}

Essayez vous-même

<html>
<head>
    <title>Width and Height</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div style="border:2px solid black;">This is a division.</div>
    <img src="https://img.freepik.com/free-photo/abstract-luxury-gradient-blue-background-smooth-dark-blue-with-black-vignette-studio-banner_1258-54865.jpg" alt="Image">
</body>
</html>