Geef de afbeelding nauwkeurige HTML-attributen width en height en gebruik vervolgens CSS om de weergegeven breedte responsief te maken en de hoogte automatisch te laten aanpassen. De afmetingen leveren vooraf een hoogte-breedteverhouding zonder de afbeelding vast te leggen op die weergavegrootte. MDN: Multimedia-afbeeldingen

Deze handleiding is bedoeld voor iemand die een HTML-pagina op een Mac bewerkt en wil dat een afbeelding met de container mee schaalt, terwijl er vóór het laden proportionele ruimte wordt gereserveerd. Het voorbeeld gebruikt een zelfstandige abstracte afbeelding, zodat je het schaalgedrag kunt uitproberen zonder een bestand te downloaden.

Hoe kunnen afmetingen ruimte reserveren zonder de weergavegrootte vast te leggen?

Een afbeelding heeft bronafmetingen, bijvoorbeeld 1200 bij 800, en een weergegeven formaat dat door de opmaak wordt bepaald. Die waarden kunnen verschillen. HTML-afmetingsattributen geven aanwijzingen voor de grootte; je stylesheet kan de weergegeven breedte en hoogte overschrijven. De HTML-standaard koppelt de attributen ook aan een voorkeursverhouding in de vorm auto 1200 / 800. HTML-standaard: attributen voor ingesloten inhoud en afbeeldingen

Bij een bron van 1200 bij 800 is de verhouding 3:2. Zodra de opmaak een weergegeven breedte vaststelt, kan de browser een proportionele hoogte berekenen voordat de bron volledig is geladen. MDN raadt aan om beide afmetingen op te geven naast responsieve CSS om verschuivingen in de opmaak door afbeeldingen te beperken. MDN: Multimedia-afbeeldingen

De praktische taakverdeling is eenvoudig: HTML beschrijft de afmetingen van de bron en CSS beschrijft hoe die in de pagina past. Zorg dat die beschrijvingen overeenkomen. Afmetingen opgeven is nuttig, zelfs als de afbeelding nooit op het oorspronkelijke formaat wordt weergegeven.

Kies of de afbeelding de container moet vullen

Gebruik het volgende CSS-fragment als de afbeelding de beschikbare breedte van de container moet vullen. Het gaat ervan uit dat de afbeelding de klasse responsive-image en nauwkeurige afmetingsattributen heeft:

.responsive-image {
  display: block;
  width: 100%;
  height: auto;
}

Als de afbeelding zo nodig kleiner moet worden, maar de opgegeven breedte moet behouden wanneer er meer ruimte is, gebruik dan dit alternatieve fragment:

.responsive-image {
  display: block;
  max-width: 100%;
  height: auto;
}

Het tweede patroon is de door MDN gedocumenteerde aanpak om een afbeelding binnen een smallere container te houden. In deze eenvoudige opmaak vult width: 100% de container, terwijl max-width: 100% een bovengrens instelt. Behoud height: auto in beide patronen, zodat de hoogte de verhouding volgt in plaats van op de HTML-hoogte te blijven staan. MDN: Multimedia-afbeeldingen

Probeer een volledige pagina met een responsieve afbeelding op je Mac

Open TextEdit, kies File > New en kies daarna Format > Make Plain Text. Plak het volledige document hieronder. Sla het op als shape-demo.html; als TextEdit vraagt welke extensie je wilt gebruiken, kies dan Use .html. Dit zijn de door Apple gedocumenteerde stappen voor het maken van een HTML-bestand. Apple: Werken met HTML-documenten in TextEdit op de Mac

Het document bevat de CSS en een gecodeerde SVG met een originele compositie van cirkels en rechthoeken. Er hoeven geen extra bestanden of pakketten te worden geïnstalleerd. Zowel de bron als het afbeeldingselement geven afmetingen van 1200 bij 800 op.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shape sizing demo</title>
  <style>
    body {
      margin: 0;
      padding: 24px;
      font-family: system-ui, sans-serif;
      line-height: 1.5;
      color: #24343b;
    }

    main {
      max-width: 900px;
      margin: 0 auto;
    }

    .responsive-image {
      display: block;
      width: 100%;
      height: auto;
      background: #edf2f4;
    }
  </style>
</head>
<body>
  <main>
    <h1>Shape study A</h1>
    <p>Resize the window to change the composition's displayed size.</p>
    <img
      class="responsive-image"
      width="1200"
      height="800"
      alt="A blue circle beside an amber rounded rectangle."
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' viewBox='0 0 1200 800'%3E%3Crect width='1200' height='800' fill='%23edf2f4'/%3E%3Ccircle cx='360' cy='400' r='180' fill='%234b8090'/%3E%3Crect x='660' y='220' width='300' height='360' rx='40' fill='%23d6a96b'/%3E%3C/svg%3E">
    <p>Marker B: this paragraph follows the image in normal document flow.</p>
  </main>
</body>
</html>

Open het opgeslagen bestand in je browser en maak het venster smaller. De compositie moet proportioneel kleiner worden en Marker B moet eronder blijven staan. Als je het venster breder maakt, wordt de compositie groter totdat de container in het voorbeeld de maximale breedte van 900 pixels bereikt. Die maximumwaarde is een illustratieve keuze voor het paginaontwerp; de reserveringstechniek vereist die niet.

De ingesloten bron wordt direct geladen, dus dit voorbeeld toont responsief schalen en geen zichtbaar vertraagde download. De gecodeerde SVG is met Python geparseerd en de afmetingen zijn gecontroleerd; ook de onderstaande berekeningen zijn uitgevoerd. Tijdens de voorbereiding is de weergave in een browser niet uitgevoerd.

Om de pagina aan te passen voor een andere bron, vervang je de waarde src en werk je beide HTML-afmetingen bij zodat ze overeenkomen met die bron. Gebruik in deze attributen gehele getallen zonder eenheid, zoals 1200, en geen waarden als 1200px. MDN schrijft dit formaat voor afbeeldingsafmetingen voor. MDN: Het afbeeldingselement

Hoeveel ruimte moet de browser reserveren?

Bereken bij deze eenvoudige opmaak, zonder rand of opvulling rond de afbeelding, de verwachte hoogte als volgt:

weergegeven hoogte = weergegeven breedte × bronhoogte ÷ bronbreedte

Met de afmetingen van 1200 bij 800 uit het voorbeeld levert dit de volgende illustratieve resultaten op. De breedtes verwijzen naar het inhoudsvak van de afbeelding, niet naar het volledige browservenster.

Weergegeven afbeeldingsbreedte Proportionele hoogte
300 CSS-pixels 200 CSS-pixels
600 CSS-pixels 400 CSS-pixels
900 CSS-pixels 600 CSS-pixels

Deze berekening is ook een handige manier om problemen op te sporen. Stel dat de bron werkelijk 1200 bij 800 is, maar dat in de HTML ten onrechte 1200 bij 600 staat. Bij een weergegeven breedte van 600 pixels suggereert de opgegeven verhouding een hoogte van 300 pixels; de werkelijke verhouding vereist 400 pixels. Zodra de natuurlijke verhouding beschikbaar is, kan de hoogte dus nog 100 pixels worden gecorrigeerd.

Die correctie volgt uit het deel auto van de verhoudingaanwijzing: een afbeelding met een natuurlijke hoogte-breedteverhouding gebruikt die verhouding zodra deze beschikbaar is. Nauwkeurige attributen zijn daarom belangrijk, ook als de stylesheet klopt. De CSS-specificatie beschrijft dit onderscheid tussen een opgegeven verhouding en de natuurlijke verhouding van een vervangen element. CSS Box Sizing Module Level 4: voorkeursverhoudingen

Wanneer gebruik je in plaats daarvan CSS aspect-ratio?

Gebruik een expliciete CSS-verhouding wanneer de opmaak bewust de vorm van het afbeeldingsvak bepaalt. Een vierkant tegelvak stelt bijvoorbeeld een andere eis dan het proportioneel weergeven van de volledige compositie met verhouding 3:2.

Het volgende is een vervangend CSS-fragment voor het volledige voorbeeld. Vervang de bestaande regel voor .responsive-image hiermee:

.responsive-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #edf2f4;
}

Hier vraagt aspect-ratio: 1 / 1 om een vierkant vak. De breedte blijft responsief en de automatische hoogte wordt op basis van die breedte berekend. Een voorkeursverhouding heeft minstens één automatische afmeting nodig om invloed op de grootte te hebben; als beide afmetingen expliciet zijn ingesteld, vervalt die functie. MDN: aspect-ratio

De declaratie object-fit: contain zorgt ervoor dat de volledige compositie zichtbaar blijft binnen het vierkant, met lege ruimte waar de vormen van de bron het vak niet vullen. Als je de waarde verandert in cover, wordt het vierkant gevuld maar valt een deel van de compositie buiten beeld. Kies dit gedrag bewust: door bijsnijden kunnen betekenisvolle delen van een afbeelding verdwijnen. MDN: object-fit

Voor een tijdelijke verhouding die moet wijken voor de natuurlijke verhouding van de bron, ondersteunt CSS ook een waarde als aspect-ratio: auto 3 / 2. De verhoudingen van het vak kunnen na het laden veranderen als de bron daarvan afwijkt. Een verhouding zonder auto drukt in plaats daarvan de gewenste vorm van de opmaak uit. CSS Box Sizing Module Level 4: voorkeursverhoudingen

Wat moet je controleren als de afbeelding nog steeds verschuift of uitrekt?

Controleer de bron en de opmaak in deze volgorde:

  1. Controleer beide HTML-afmetingen. Ze moeten de bron nauwkeurig beschrijven. Een juiste breedte in combinatie met een onjuiste hoogte levert nog steeds een onjuiste verhouding op.
  2. Controleer de toegepaste CSS-hoogte. In het proportionele voorbeeld moet die auto zijn. Een andere overeenkomende regel kan een vaste hoogte instellen.
  3. Controleer de weergegeven breedte. De reserveringsberekening hangt af van de breedte die door de opmaak is vastgesteld. Door het browservenster te vergroten of te verkleinen veranderen die breedte en de proportionele hoogte zoals bedoeld.
  4. Controleer expliciete verhoudingsregels. Een vierkante CSS-verhouding en een natuurlijke verhouding van 3:2 geven verschillende schaalbedoelingen aan.
  5. Controleer de afbeeldingspassing afzonderlijk. contain en cover bepalen hoe de bron in het vak past; ze leveren niet de ontbrekende afmetingen van het vak.

Deze controles volgen het onderscheid tussen het vak van het element, de voorkeursverhouding en de bron die erin wordt weergegeven. MDN legt in de handleiding over hoogte-breedteverhoudingen uit hoe expliciete afmetingen de proportionele grootte beïnvloeden. De referentie over object-fit beschrijft het aanpassen en bijsnijden. MDN: Hoogte-breedteverhoudingen begrijpen en instellen, MDN: object-fit

Ook browserondersteuning kent grenzen. Volgens MDN wordt de CSS-eigenschap aspect-ratio breed ondersteund in browsers sinds september 2021. Dat betekent niet dat elke oudere browser de eigenschap ondersteunt, en die datum geldt ook niet als compatibiliteitsdatum voor elk gedrag waarbij HTML-afmetingen worden omgezet. Raadpleeg de compatibiliteitsinformatie in de documentatie als een oudere browser deel uitmaakt van je vereisten. MDN: aspect-ratio

Begin bij een gewone afbeelding die proportioneel moet worden weergegeven met nauwkeurige HTML-afmetingen en responsieve CSS. Gebruik een expliciete CSS-verhouding als de pagina een bepaalde vorm van het vak vereist. Met deze keuzes kun je de bedoelde ruimte reserveren en tegelijk de weergegeven grootte laten meebewegen met de paginaopmaak.

Bronnen