Largeur et hauteur

Fait partie de la section Style avec CSS du Journey HTML de Coddy. Leçon 37 sur 76.

En CSS, les propriétés width et height servent à 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 disposition 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), en ems (em), en pourcentages (%) ou dans 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 les proportions.

Défi

Facile

Un document HTML contenant une division (<div>) et une image (<img>) vous est fourni. 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 width sur 400px et height sur 250px.
Écrivez une règle CSS qui cible l’élément <img>. Définissez width sur 300px et height sur 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>