Använd picture för att växla mellan kvadratiska och breda bildfiler vid en brytpunkt för visningsområdet. Ange måtten separat för varje källa och låt CSS skala den valda bilden proportionellt. Den här guiden skapar och testar ett lokalt exempel på en Mac.

Hur växlar picture mellan olika bildförhållanden?

Placera ett source-element med ett villkor för media före reservalternativet img inuti picture. Webbläsaren väljer den första tillgängliga källan vars villkor matchar och väljer sedan en bild från källans srcset. Detta kallas art direction: att tillhandahålla olika bildkompositioner för olika layouter. HTML-standarden stöder uttryckligen detta tillvägagångssätt. HTML Standard: Images

Tre delar samverkar: källan väljer resursen, dimensionsattributen beskriver resursens proportioner och CSS styr dess visningsstorlek. Den valda källans width och height kan ange bildförhållandet för den inneslutna bilden. Själva elementet picture återger inte bilden; det gör dess img. HTML Standard: Embedded content

Välj mekanism utifrån resultatet du behöver:

Ditt krav Lämplig mekanism
Ändra bildkompositionen eller bildförhållandet vid en brytpunkt picture med en source som använder media
Erbjuda olika upplösningar av samma bildkomposition srcset, med sizes när breddbeskrivare används
Behålla en fil men beskära den i en fast ram CSS-storleksanpassning och object-fit: cover

Dessa mekanismer hanterar olika beslut. Art direction avgör vilken bildkomposition som visas. Upplösningsval låter webbläsaren välja en lämplig kandidat inom en bildkomposition. CSS-anpassning avgör hur den valda resursen fyller sin ram. MDN dokumenterar dessa användningsområden för picture och sambandet med srcset och anpassningsegenskaper. MDN: The picture element

Skapa ett komplett lokalt exempel på din Mac

Exemplet använder två ursprungliga SVG-resurser med en orange cirkel och en turkos rundad rektangel. Den kvadratiska versionen staplar dem; den breda versionen placerar dem bredvid varandra. Allt finns i en enda mapp, utan externa resurser eller JavaScript för växlingen.

Resursernas utformning är enkel: under en visningsbredd på 700px används en kvadratisk resurs på 600 × 600. Vid 700px och däröver används en bred resurs på 1200 × 600. Den visade bilden fyller ett innehållsområde med 16px på vardera sidan, upp till en maximal bredd på 960px. Måtten och brytpunkten är exempel på designval.

Spara de två formresurserna

Skapa en mapp med namnet picture-demo. Använd en vanlig textredigerare för kod för att skapa följande två filer i den och behåll exakt de angivna namnen och filändelserna. Varje kodblock innehåller hela filen; kopiera innehållet utan Markdown-staketmarkörerna.

Spara detta som shapes-square.svg:

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 600 600">
  <rect width="600" height="600" fill="#fff5df"/>
  <circle cx="300" cy="180" r="100" fill="#de7b35"/>
  <rect x="150" y="340" width="300" height="160" rx="40" fill="#247d83"/>
</svg>

Spara detta som shapes-wide.svg:

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600" viewBox="0 0 1200 600">
  <rect width="1200" height="600" fill="#fff5df"/>
  <circle cx="320" cy="300" r="180" fill="#de7b35"/>
  <rect x="650" y="150" width="400" height="300" rx="60" fill="#247d83"/>
</svg>

Spara HTML-sidan

Skapa index.html i samma mapp. Om du använder TextEdit väljer du File > New och sedan Format > Make Plain Text innan du klistrar in koden. Spara filen med filändelsen .html och välj Use .html om du får frågan. Apple beskriver detta arbetsflöde för att skapa HTML-filer. Apple: Work with HTML documents in TextEdit on Mac

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shape study</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    main { width: calc(100% - 32px); max-width: 960px; margin: 24px auto; }
    picture { display: block; }
    .study-image { display: block; width: 100%; height: auto; }
  </style>
</head>
<body>
  <main>
    <h1>Shape study</h1>
    <picture>
      <source media="(min-width: 700px)" srcset="shapes-wide.svg"
              width="1200" height="600">
      <img class="study-image" src="shapes-square.svg"
           width="600" height="600"
           alt="An orange circle and a teal rounded rectangle on cream.">
    </picture>
    <p>Resize the viewport to compare the two arrangements.</p>
  </main>
</body>
</html>

Öppna index.html i Safari. Om visningsområdet är tillräckligt brett bör formerna visas bredvid varandra. I ett smalare visningsområde bör de staplas. Håll alla tre filer tillsammans: de relativa resursadresserna utgår från HTML-filens plats.

Den breda källan använder srcset, trots att den bara innehåller en URL. Inuti picture kräver source srcset; attributet src är inte tillåtet. Dimensionsattribut är heltal utan enheter, så använd width="1200", inte width="1200px". MDN: The source element

Varför ange mått för både källan och reservalternativet?

Reservalternativets mått på 600 × 600 beskriver den kvadratiska resursen. Den breda källans mått på 1200 × 600 beskriver den breda resursen. Om båda måttparen anges kan en webbläsare som stöder detta fastställa den valda bildens proportioner innan den laddas ned. Om de kvadratiska måtten återanvänds för den breda källan blir det inledande bildförhållandet fel. HTML Standard: Source dimension attributes

CSS anger sedan bildens bredd till det tillgängliga innehållsområdets bredd och låter höjden vara automatisk. Den automatiska dimensionen gör att bildens proportioner avgör höjden. Utkastet till CSS-regler för storleksanpassning beskriver hur ett föredraget bildförhållande påverkar automatisk storleksanpassning; om båda dimensionerna anges explicit försvinner den flexibiliteten. CSS Box Sizing Module Level 4

För det här exemplet kan layouten kontrolleras med en enkel beräkning:

bildbredd = min(visningsområdets bredd - 32, 960)
kvadratisk höjd = bildbredd
bred höjd = bildbredd / 2
Visningsområdets bredd i CSS-pixlar Vald resurs Beräknad bildstorlek
500 shapes-square.svg 468 × 468
699 shapes-square.svg 667 × 667
700 shapes-wide.svg 668 × 334
1000 shapes-wide.svg 960 × 480

Detta är förväntade värden som beräknats för den angivna CSS-koden, under antagandet att rullningslistens bredd inte minskar det tillgängliga innehållsområdet. SVG-syntaxen, resursnamnen, de angivna måtten och beräkningarna kontrollerades programmatiskt; exemplet renderades inte i en webbläsare under förberedelserna.

Lägg märke till den stora höjdändringen mellan 699px och 700px. Den följer direkt av att växla från en kvadratisk till en bred bildkomposition. Det är förväntat när storleken ändras. Om höjden ändras ytterligare efter inläsningen medan visningsområdet behåller samma storlek bör du kontrollera de angivna måtten och eventuell överordnad CSS.

Testa brytpunkten exakt i Safari

Med Safaris responsiva designläge kan du ändra sidans visningsområde oberoende av skrivbordsfönstret. Aktivera Show features for web developers i Safaris inställningar under Advanced. Öppna exemplet och välj sedan Develop > Enter Responsive Design Mode eller tryck på Control-Command-R. WebKit beskriver inställningen, kortkommandot och den storleksändringsbara förhandsvisningen. WebKit: Simplified Responsive Design Mode

Testa först 699px och 700px, sedan ett tydligt smalt och ett tydligt brett visningsområde. Kontrollera att bildkompositionen ändras vid den avsedda gränsen, att den orange formen förblir cirkelformad och att stycket under bilden följer den ändrade höjden. Läs in sidan på nytt på båda sidor om brytpunkten för att kontrollera både den inledande layouten och storleksändringen.

Om du vill kontrollera direkt vilken fil Safari valde kan du köra det här valfria diagnostikavsnittet i Web Inspectors konsol medan exemplet visas:

const studyImage = document.querySelector('.study-image');
if (!studyImage) {
  throw new Error('Open the Shape study example before running this snippet.');
}
const studyBox = studyImage.getBoundingClientRect();
console.table({
  selectedURL: studyImage.currentSrc,
  displayedWidth: studyBox.width,
  displayedHeight: studyBox.height
});

Kör avsnittet igen efter att ha passerat brytpunkten. Den valda URL:en bör sluta med motsvarande kvadratiska eller breda filnamn. Egenskapen currentSrc anger URL:en som webbläsaren valde; dess värde i sig bevisar inte att resursen laddades in korrekt. MDN: HTMLImageElement currentSrc property

Vad bör du kontrollera om växlingen inte fungerar som den ska?

Gå igenom val av resurs, resursmått och visning i den ordningen. Då undviker du att förväxla ett problem med CSS-storleken med ett problem med resursvalet.

  1. Den kvadratiska filen är fortfarande vald vid breda visningsområden. Kontrollera att visningsområdet är minst 700px brett, att source står före img och att källan använder srcset. Kontrollera ordningen om det finns flera källor: en tidigare källa med matchande villkor kan ha företräde. HTML Standard: Art direction selection
  2. En resurs visas inte. Jämför filnamnen i markeringen med filerna i mappen, inklusive filändelserna. I det här exemplet måste båda SVG-filerna ligga bredvid index.html.
  3. Rätt resurs visas med fel form. Kontrollera CSS som används på själva img, särskilt regler som anger en fast höjd. Återställ height: auto för proportionell storleksanpassning.
  4. Bilden hoppar till efter inläsningen. Jämför varje angivet måttpar med resursens faktiska bildförhållande. Kontrollera också om en uttrycklig CSS-egenskap aspect-ratio åsidosätter de avsedda proportionerna.

Om din faktiska design kräver en fast ram bör du välja anpassningsbeteende medvetet. object-fit: contain bevarar hela resursen och kan lämna tomt utrymme; cover fyller ramen och kan beskära innehållet; fill kan sträcka ut det. Använd anpassningsegenskaperna på img. Det angivna exemplet behöver ingen fast ram eftersom layouten följer den valda resursens proportioner. MDN: object-fit

Vilka begränsningar finns i webbläsarstöd?

Stöd för picture och stöd för källspecifika mått är två olika saker att ta hänsyn till. HTML-standardens kompatibilitetsöversikt anger picture i aktuella webbläsarmotorer. MDN anger att källans egenskap width, som återspeglar dess dimensionsattribut, har varit tillgänglig i webbläsare sedan december 2022. Räkna inte med att äldre webbläsare reserverar utrymme korrekt utifrån källspecifika mått. HTML Standard: The picture element, MDN: HTMLSourceElement width property

Om ingen källa matchar eller webbläsaren inte stöder picture, tillhandahåller reservalternativet img bilden. I det här exemplet är det den kvadratiska bildkompositionen. En webbläsare som växlar resurser men saknar stöd för källdimensioner kan fastställa den breda bildens slutliga proportioner först efter inläsningen. MDN: The picture element

Om en målwebbläsare stöder CSS aspect-ratio men behöver en uttrycklig storleksregel kan du lägga till följande CSS-avsnitt i den befintliga stilmallen. Det speglar HTML-brytpunkten och anger preliminära bildförhållanden samtidigt som den inlästa bildens naturliga bildförhållande får ta över:

.study-image {
  aspect-ratio: auto 1 / 1;
}

@media (min-width: 700px) {
  .study-image {
    aspect-ratio: auto 2 / 1;
  }
}

MDN dokumenterar den här kombinationen av auto och ett bildförhållande och anger att CSS aspect-ratio har varit tillgängligt i webbläsare sedan september 2021. Avsnittet har därför en egen stödbrytpunkt. Håll brytpunkten synkroniserad med källvillkoret och testa de webbläsarversioner du faktiskt behöver stödja. MDN: aspect-ratio

När exemplet fungerar som det ska kan du ersätta de syntetiska filerna med dina egna bildkompositioner och uppdatera deras mått samtidigt. Håll källvillkoret, resursproportionerna och CSS-storleksanpassningen konsekventa och upprepa sedan kontrollerna precis under och över brytpunkten.

Källor