Testez vos compétences : Définir la taille

La taille n°1

Dans cette tâche, vous avez deux boîtes.

Pour compléter la tâche :

1. Redimensionnez la première boîte afin que sa hauteur soit d'au moins 100px, même si le contenu est insuffisant pour atteindre cette hauteur. Le contenu ne doit pas déborder si la boîte est trop petite.
2. Pour tester cela, supprimez le contenu du HTML pour vous assurer que vous obtenez toujours une boîte de 100px de hauteur même sans contenu.
3. Redimensionnez la deuxième boîte afin qu'elle ait une hauteur fixe de 100px. Dans ce cas, le contenu doit déborder.

Le point de départ de la tâche ressemble à ceci :

Voici le code sous-jacent pour ce point de départ :

<div class="boite boite1">
  <p>
    Les légumes, c'est un plus pour vous, c'est pourquoi je vous demande de
    mettre davantage de chou-rave, ciboulette, daikon, amarante, tatsoi,
    tomatillo, melon, haricots azuki, ail.
  </p>
</div>

<div class="boite boite2">
  <p>
    Feuilles de betterave, maïs, soko, endive, courge à gumbo. Persil, échalote,
    courgette, tatsoi, pousses de pois, fèves, chou vert, pissenlit, gombo,
    wakamé, tomate. Pissenlit, concombre, arachide, pois, cacahuète, soko,
    courgette.
  </p>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
  padding: 1em;
}

.boite {
  border: 5px solid black;
  width: 400px;
  margin-bottom: 1em;
}

.boite1 {
  /* Ajoutez des styles ici */
}

.boite2 {
  /* Ajoutez des styles ici */
}

Le style mis à jour doit ressembler à ceci :

.boite1 {
  min-height: 100px;
}

.boite2 {
  height: 100px;
}

La taille n°2

Dans cette tâche, vous avez une boîte qui contient une autre boîte.

Pour compléter la tâche :

1. Faites en sorte que la largeur de la boîte intérieure soit de 60% de la largeur de la boîte extérieure. La propriété box-sizing est définie sur border-box, ce qui signifie que la largeur totale inclut tout padding et border.
2. Donnez à la boîte intérieure un padding de 10% sur tous les côtés.

Le point de départ de la tâche ressemble à ceci :

Voici le code sous-jacent pour ce point de départ :

<div class="boite">
  <div class="interieure">
    Mettez moi à 60% de la largeur de ma boîte parente.
  </div>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
  padding: 1em;
}

.boite {
  border: 5px solid black;
  width: 400px;
  margin-bottom: 1em;
}

.interieure {
  background-color: rebeccapurple;
  color: white;
  border-radius: 5px;
}

* {
  box-sizing: border-box;
}
.interieure {
  /* Ajoutez des styles ici */
}

Le style mis à jour doit ressembler à ceci :

.interieure {
  width: 60%;
  padding: 10%;
}

La taille n°3

Dans cette tâche, vous avez deux images dans des boîtes. Une image est plus petite que la boîte, tandis que l'autre est plus grande, ce qui la fait dépasser de la boîte.

Pour compléter la tâche, imaginez que la boîte est réactive et peut donc grandir et rétrécir. Appliquez une déclaration aux images afin que la grande image se réduise dans la boîte, mais que la petite image ne s'étire pas.

Le point de départ de la tâche ressemble à ceci :

Voici le code sous-jacent pour ce point de départ :

<div class="boite">
  <img
    alt="Une étoile rose"
    src="https://mdn.github.io/shared-assets/images/examples/star-pink_256x256.png" />
</div>

<div class="boite">
  <img
    alt="Des montgolfières volant dans un ciel dégagé, et une foule de personnes au premier plan"
    src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
</div>

body {
  font: 1.2em / 1.5 sans-serif;
  padding: 1em;
}
.boite {
  border: 5px solid black;
  margin-bottom: 1em;
  width: 500px;
}

img {
  /* Ajoutez des styles ici */
}

Le style mis à jour doit ressembler à ceci :

img {
  max-width: 100%;
}

• Précédent
• Aperçu : Bases de la mise en forme CSS
• Suivant