Ange korrekta HTML-attribut för bildens width och height, och använd sedan CSS för att göra den visade bredden responsiv och höjden automatisk. Måtten anger ett tidigt bildförhållande utan att låsa bilden till den visningsstorleken. MDN: Multimediebilder

Den här guiden är till för dig som redigerar en HTML-sida på en Mac och vill att en bild ska anpassas efter sin behållare, samtidigt som proportionellt utrymme reserveras innan den läses in. Exemplet använder en fristående abstrakt grafik, så att du kan prova storleksbeteendet utan att ladda ned någon resurs.

Hur kan mått reservera utrymme utan att låsa visningsstorleken?

En bild har resursmått, till exempel 1200 gånger 800, och en visningsstorlek som bestäms av layouten. Dessa värden kan skilja sig åt. HTML-måttattribut anger storleksledtrådar; formatmallen kan åsidosätta den visade bredden och höjden. HTML-standarden kopplar också attributen till ett föredraget bildförhållande i formatet auto 1200 / 800. HTML-standarden: attribut för inbäddat innehåll och bilder

För en resurs på 1200 gånger 800 är förhållandet 3:2. När layouten har fastställt den visade bredden kan webbläsaren beräkna en proportionell höjd innan resursen har lästs in helt. MDN rekommenderar att båda måtten anges tillsammans med responsiv CSS för att minska layoutförskjutningar som orsakas av bilder. MDN: Multimediebilder

Den praktiska ansvarsfördelningen är enkel: HTML beskriver resursens mått och CSS beskriver hur den passar in på sidan. Se till att beskrivningarna stämmer överens. Det är användbart att ange måtten även om bilden aldrig kommer att visas i sin ursprungliga storlek.

Välj om bilden ska fylla sin behållare

Använd följande CSS-fragment när bilden ska fylla behållarens tillgängliga bredd. Det förutsätter att bilden har klassen responsive-image och korrekta måttattribut:

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

Om bilden bara ska krympa när det behövs, men behålla sin angivna bredd när det finns mer utrymme, använder du i stället följande fragment:

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

Det andra mönstret är den metod MDN dokumenterar för att hålla en bild inom en smalare behållare. I den här enkla layouten fyller width: 100% behållaren, medan max-width: 100% anger en övre gräns. Behåll height: auto i båda mönstren så att höjden kan följa bildförhållandet i stället för att ligga kvar på HTML-höjden. MDN: Multimediebilder

Prova en komplett sida med responsiv bild på din Mac

Öppna Textredigerare, välj Arkiv > Nytt och välj sedan Format > Gör till vanlig text. Klistra in hela dokumentet nedan. Spara det som shape-demo.html. Om Textredigerare frågar vilket filnamnstillägg du vill använda väljer du Använd .html. Detta är Apples dokumenterade steg för att skapa en HTML-fil. Apple: Arbeta med HTML-dokument i Textredigerare på Mac

Dokumentet innehåller sin CSS och en kodad SVG med en originalkomposition av en cirkel och en rektangel. Du behöver inte installera några ytterligare filer eller paket. Både resursen och bildelementet anger måtten 1200 gånger 800.

<!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>

Öppna den sparade filen i webbläsaren och gör fönstret smalare. Kompositionen bör krympa proportionellt och Markör B bör ligga kvar under den. När du gör fönstret bredare växer kompositionen tills exempelbehållaren når sin maxbredd på 900 pixlar. Den maxbredden är ett illustrativt val för sidans utformning, inte ett krav för tekniken att reservera utrymme.

Den inbäddade resursen läses in direkt, så det här exemplet visar responsiv storleksanpassning snarare än en synligt fördröjd nedladdning. Den kodade SVG-filen har parsats och dess mått har kontrollerats med Python; beräkningarna nedan har också körts. Webbläsarrendering kördes inte under förberedelserna.

Om du vill anpassa sidan till en annan resurs byter du ut värdet för src och uppdaterar båda HTML-måtten så att de stämmer med resursen. Använd heltal utan enhet, till exempel 1200, i dessa attribut i stället för 1200px. MDN anger detta format för bildmått. MDN: Bildelementet

Hur mycket utrymme bör webbläsaren reservera?

För den här enkla layouten, där bilden saknar kantlinje och utfyllnad, beräknar du den förväntade höjden så här:

visad höjd = visad bredd × resursens höjd ÷ resursens bredd

Med exempelvärdena 1200 gånger 800 får du följande illustrativa resultat. Bredderna avser bildens innehållsbox, inte hela webbläsarfönstret.

Bildens visade bredd Proportionell höjd
300 CSS-pixlar 200 CSS-pixlar
600 CSS-pixlar 400 CSS-pixlar
900 CSS-pixlar 600 CSS-pixlar

Den här beräkningen är också ett användbart felsökningsverktyg. Anta att den faktiska resursen är 1200 gånger 800, men att HTML felaktigt anger 1200 gånger 600. Vid en visad bredd på 600 pixlar ger det angivna förhållandet en höjd på 300 pixlar; det faktiska förhållandet kräver 400 pixlar. Det kan leda till en korrigering på 100 pixlar när det naturliga förhållandet blir tillgängligt.

Korrigeringen beror på delen auto i förhållandeledtråden: när en bilds naturliga bildförhållande blir tillgängligt används det. Därför är korrekta attribut viktiga även när formatmallen är rätt. CSS-specifikationen definierar skillnaden mellan ett angivet förhållande och ett ersatt elements naturliga förhållande. CSS Box Sizing Module Level 4: föredragna bildförhållanden

När bör du använda CSS-egenskapen aspect-ratio i stället?

Använd ett uttryckligt CSS-förhållande när layouten medvetet anger bildrutans form. En kvadratisk ruta är till exempel ett annat krav än att visa hela 3:2-kompositionen proportionellt.

Följande är ett CSS-fragment som ersätter motsvarande del i hela exemplet. Ersätt den befintliga regeln för .responsive-image med den här:

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

Här begär aspect-ratio: 1 / 1 en kvadratisk ruta. Bredden förblir responsiv, och den automatiska höjden beräknas utifrån bredden. Ett föredraget bildförhållande behöver minst en automatisk dimension för att påverka storleksberäkningen; om båda dimensionerna anges uttryckligen försvinner den funktionen. MDN: aspect-ratio

Deklarationen object-fit: contain håller hela kompositionen synlig i kvadraten och lämnar tomt utrymme där formerna inte fyller resursen. Om du ändrar värdet till cover fylls kvadraten, men delar av kompositionen beskärs. Välj det beteendet medvetet: en beskärning kan ta bort betydelsefulla delar av en bild. MDN: object-fit

Om ett tillfälligt förhållande ska ge vika för resursens naturliga förhållande stöder CSS även ett värde som aspect-ratio: auto 3 / 2. Rutans proportioner kan då ändras efter inläsningen om resursen har ett annat förhållande. Ett förhållande utan auto anger i stället layoutens föredragna form. CSS Box Sizing Module Level 4: föredragna bildförhållanden

Vad bör du kontrollera om bilden fortfarande förskjuts eller tänjs ut?

Kontrollera resursen och layouten i den här ordningen:

  1. Kontrollera båda HTML-måtten. De ska beskriva resursen korrekt. En korrekt bredd tillsammans med en felaktig höjd ger fortfarande ett felaktigt förhållande.
  2. Kontrollera den tillämpade CSS-höjden. I det proportionella exemplet ska den vara auto. En annan matchande regel kan ange en fast höjd.
  3. Kontrollera den visade bredden. Beräkningen av det reserverade utrymmet beror på den bredd som layouten fastställer. När du ändrar storlek på webbläsaren ändras bredden och den proportionella höjden avsiktligt.
  4. Kontrollera uttryckliga förhållanderegler. Ett kvadratiskt CSS-förhållande och ett naturligt förhållande på 3:2 uttrycker olika avsikter för storleksanpassningen.
  5. Kontrollera bildanpassningen separat. contain och cover styr hur resursen passar i rutan; de anger inte de mått som saknas för rutan.

Kontrollerna följer skillnaden mellan elementets ruta, dess föredragna förhållande och resursen som visas i den. MDN:s guide om aspect-ratio förklarar hur uttryckliga mått påverkar proportionell storleksanpassning, medan referensen för object-fit beskriver anpassning och beskärning. MDN: Förstå och ställa in bildförhållanden, MDN: object-fit

Webbläsarstöd har också en gräns. MDN anger att CSS-egenskapen aspect-ratio har haft brett stöd i webbläsare sedan september 2021. Det innebär inte att alla äldre webbläsare stöder den, och datumet gäller inte heller alla beteenden för hur HTML-mått översätts. Kontrollera kompatibilitetsinformationen i dokumentationen om en äldre webbläsare ingår i dina krav. MDN: aspect-ratio

För vanliga uppgifter med proportionella bilder börjar du med korrekta HTML-mått och responsiv CSS. Använd ett uttryckligt CSS-förhållande när sidan behöver en viss form på bildrutan. Tillsammans låter dessa val dig reservera avsett utrymme och samtidigt låta den visade storleken följa sidans layout.

Källor