HTML en CSS leren: Afbeeldingen die meeschalen

Afbeeldingen die meeschalen

Walter heeft een tekening van zijn werkbank laten maken. Op de laptop staat ze mooi, maar op zijn gsm steekt ze rechts uit de pagina, en moet hij opzij scrollen om de radio te zien.

Nooit breder dan de ouder

Een afbeelding is standaard zo breed als het bestand of het attribuut width zegt, hier 800px. Op een gsm steekt ze dan uit de pagina.

Met max-width: 100% wordt ze nooit breder dan haar ouder: op een smal scherm krimpt ze, op een breed scherm blijft ze 800px. Met height: auto krimpt de hoogte mee, anders wordt ze platgedrukt.

width: 100% lijkt hetzelfde, maar rekt ook een kleine afbeelding uit tot de volle breedte, en dan wordt ze wazig. Verander de breedte onder de pagina en kijk hoe de tekening meegaat.

style.css

1img {2  max-width: 100%;3  height: auto;4}

repaircafe.example

Probeer het zelf

Laat de tekening meeschalen. Op een gsm staat ze boven de tekst; vanaf 700px staan tekening en tekst naast elkaar, in twee even brede kolommen met 16px ruimte.

1/* Jouw CSS komt hier. */

1<link rel="stylesheet" href="style.css">2<main>3  <img class="foto" src="werkbank.svg" alt="Een werkbank met gereedschap" width="800" height="400">4  <p class="slogan">Breng je kapotte spullen mee: we herstellen ze samen.</p>5</main>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #f4f0e8;5  color: #2a2622;6}7header {8  padding: 12px 16px;9  background: #1f4e5f;10  color: #ffffff;11}12header h1 {13  margin: 0;14  font-size: 1.5rem;15}16nav a {17  padding: 6px 10px;18  border-radius: 999px;19  color: #ffffff;20  text-decoration: none;21}22main {23  padding: 0 16px 24px;24}25.slogan {26  margin: 16px 0 0;27  max-width: 40rem;28}29.tafels {30  display: grid;31  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));32  gap: 12px;33  margin: 16px 0;34}35.knop {36  display: inline-block;37  margin-top: 12px;38  padding: 10px 18px;39  border-radius: 999px;40  background: #d1495b;41  color: #ffffff;42  font-weight: 700;43  text-decoration: none;44}45/* Een gekleurde rand per tafel en een etiket met een gaatje: alleen voor de sier. */46.tafel {47  padding: 14px 16px 16px;48  border-top: 4px solid #f2a541;49  border-radius: 14px;50  background: #ffffff;51  box-shadow: 0 1px 2px rgb(42 38 34 / 0.08), 0 8px 18px -12px rgb(42 38 34 / 0.35);52}53.tafel h2 {54  margin: 0 0 6px;55  font-size: 1.1rem;56}57.tafel p {58  margin: 0;59  color: #5b544c;60}61.fiets {62  border-top-color: #2a9d8f;63}64.elektro {65  border-top-color: #f2a541;66}67.naai {68  border-top-color: #d1495b;69}70.computer {71  border-top-color: #5b6cae;72}73.etiket {74  display: inline-block;75  margin-bottom: 8px;76  padding: 3px 10px 3px 16px;77  border-radius: 4px 999px 999px 4px;78  background: radial-gradient(circle at 7px 50%, #ffffff 0 2.5px, transparent 3px), #ffd166;79  color: #3d2c00;80  font-size: 0.75rem;81  font-weight: 700;82}83form {84  display: grid;85  gap: 6px;86  max-width: 28rem;87  margin: 16px 0;88}89label {90  margin-top: 8px;91  font-weight: 600;92}93input,94select,95textarea {96  padding: 8px 10px;97  border: 1px solid #b9b0a3;98  border-radius: 8px;99  background: #ffffff;100  color: #2a2622;101  font: inherit;102}103button {104  justify-self: start;105  margin-top: 12px;106  padding: 10px 18px;107  border: 0;108  border-radius: 999px;109  background: #1f4e5f;110  color: #ffffff;111  font: inherit;112  font-weight: 700;113}114footer {115  padding: 12px 16px;116  background: #1f4e5f;117  color: #ffffff;118}

repaircafe.example

Klaar voor meer?

De volledige les heeft 5 oefeningen, van makkelijk naar uitdagend, met hints, punten en een reeks die je kan opbouwen.

Begin aan de les

Nooit breder dan de ouder

Een afbeelding is standaard zo breed als het bestand of het attribuut width zegt, hier 800px. Op een gsm steekt ze dan uit de pagina.

Met max-width: 100% wordt ze nooit breder dan haar ouder: op een smal scherm krimpt ze, op een breed scherm blijft ze 800px. Met height: auto krimpt de hoogte mee, anders wordt ze platgedrukt.

width: 100% lijkt hetzelfde, maar rekt ook een kleine afbeelding uit tot de volle breedte, en dan wordt ze wazig. Verander de breedte onder de pagina en kijk hoe de tekening meegaat.

style.css

1img {2  max-width: 100%;3  height: auto;4}

repaircafe.example

Probeer het zelf

Laat de tekening meeschalen. Op een gsm staat ze boven de tekst; vanaf 700px staan tekening en tekst naast elkaar, in twee even brede kolommen met 16px ruimte.

1/* Jouw CSS komt hier. */

1<link rel="stylesheet" href="style.css">2<main>3  <img class="foto" src="werkbank.svg" alt="Een werkbank met gereedschap" width="800" height="400">4  <p class="slogan">Breng je kapotte spullen mee: we herstellen ze samen.</p>5</main>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #f4f0e8;5  color: #2a2622;6}7header {8  padding: 12px 16px;9  background: #1f4e5f;10  color: #ffffff;11}12header h1 {13  margin: 0;14  font-size: 1.5rem;15}16nav a {17  padding: 6px 10px;18  border-radius: 999px;19  color: #ffffff;20  text-decoration: none;21}22main {23  padding: 0 16px 24px;24}25.slogan {26  margin: 16px 0 0;27  max-width: 40rem;28}29.tafels {30  display: grid;31  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));32  gap: 12px;33  margin: 16px 0;34}35.knop {36  display: inline-block;37  margin-top: 12px;38  padding: 10px 18px;39  border-radius: 999px;40  background: #d1495b;41  color: #ffffff;42  font-weight: 700;43  text-decoration: none;44}45/* Een gekleurde rand per tafel en een etiket met een gaatje: alleen voor de sier. */46.tafel {47  padding: 14px 16px 16px;48  border-top: 4px solid #f2a541;49  border-radius: 14px;50  background: #ffffff;51  box-shadow: 0 1px 2px rgb(42 38 34 / 0.08), 0 8px 18px -12px rgb(42 38 34 / 0.35);52}53.tafel h2 {54  margin: 0 0 6px;55  font-size: 1.1rem;56}57.tafel p {58  margin: 0;59  color: #5b544c;60}61.fiets {62  border-top-color: #2a9d8f;63}64.elektro {65  border-top-color: #f2a541;66}67.naai {68  border-top-color: #d1495b;69}70.computer {71  border-top-color: #5b6cae;72}73.etiket {74  display: inline-block;75  margin-bottom: 8px;76  padding: 3px 10px 3px 16px;77  border-radius: 4px 999px 999px 4px;78  background: radial-gradient(circle at 7px 50%, #ffffff 0 2.5px, transparent 3px), #ffd166;79  color: #3d2c00;80  font-size: 0.75rem;81  font-weight: 700;82}83form {84  display: grid;85  gap: 6px;86  max-width: 28rem;87  margin: 16px 0;88}89label {90  margin-top: 8px;91  font-weight: 600;92}93input,94select,95textarea {96  padding: 8px 10px;97  border: 1px solid #b9b0a3;98  border-radius: 8px;99  background: #ffffff;100  color: #2a2622;101  font: inherit;102}103button {104  justify-self: start;105  margin-top: 12px;106  padding: 10px 18px;107  border: 0;108  border-radius: 999px;109  background: #1f4e5f;110  color: #ffffff;111  font: inherit;112  font-weight: 700;113}114footer {115  padding: 12px 16px;116  background: #1f4e5f;117  color: #ffffff;118}

repaircafe.example