Billedformat - CSS-tricks

CSS-egenskaben aspect-ratiogiver dig mulighed for at oprette felter, der opretholder proportionale dimensioner, hvor heightog widthaf en boks automatisk beregnes som et forhold. Det er lidt matematik-y, men ideen er, at du kan dele en værdi med en anden på denne egenskab, og den beregnede værdi sikrer, at en boks forbliver i det forhold.

.element ( aspect-ratio: 2 / 1; /* ↔️ is double the ↕️ */ ) .element ( aspect-ratio: 1 / 1; /* ⏹ a perfect square */ )

aspect-ratioer defineret i CSS Box Sizing Module Level 4 specifikation, som i øjeblikket er i Working Draft. Det betyder, at det stadig er i gang og har en chance for at ændre sig. Men med Chrome og Firefox, der understøtter det bag et eksperimentelt flag, og Safari Technology Preview tilføjer understøttelse af det i begyndelsen af ​​2021, er der stærke signaler, aspect-ratioder vinder meget fart.

Syntaks

aspect-ratio: auto || ;

På almindelig engelsk: aspect-ratioantages enten at være autostandard eller accepterer a som en værdi hvor .

• Startværdi: auto
• Gælder for: alle elementer undtagen indbyggede kasser og interne rubin- eller bordkasser
• Arvet: nej
• Procentdele: ikke oplyst
• Beregnet værdi: specificeret nøgleord eller et par tal
• Animationstype: diskret

Værdier

/* Keyword values */ aspect-ratio: auto; /* default */ /* Ratio values */ aspect-ratio: 1 / 1; /* width and height are equal proportion */ aspect-ratio: 2 / 1; /* width is twice the height*/ aspect-ratio: 1 / 2; /* width is half the height */ aspect-ratio: 16 / 9 /* typical video aspect ratio */ /* Global values */ aspect-ratio: inherit; aspect-ratio: initial; aspect-ratio: unset;

Det fungerer på udskiftet og ikke-udskiftet indhold

Hvis du tænker: "Uhm, ja, gør browseren det ikke allerede for os på billeder?" svaret er: absolut . Browsere foretager nogle smarte billedformatberegninger på udskiftet indhold som billeder. Så hvis et billede f.eks. Har en bredde på 500 px, bøjer browseren sine CSS-layoutalgoritmer for at opretholde billedets iboende eller "naturlige" dimensioner. Den aspect-ratioegenskab kan anvendes til effektivt at tilsidesætte de fysiske dimensioner.

Men ikke-udskiftet indhold har ikke en naturlig andel. Det er de fleste af de ting, vi arbejder med, som divs. Snarere end at forsøge at opretholde elementets naturlige proportioner, aspect-ratioindstiller en ”foretrukken” størrelse.

Nu bemærker spec i øjeblikket, at ældre CSS-specifikationer, især CSS 2.1, ikke indeholder en klar skelnen mellem udskiftet og ikke-udskiftet indhold. Det betyder, at vi kunne se nogle ekstra specielle tilfælde tilføjet til specifikationen for at hjælpe med at afklare dem. For tiden ser vi browsere, der understøtter indstilling af foretrukne billedformater på udskiftet og ikke-udskiftet separat, hvor nogle af browsere med tidlig support bag et eksperimentelt flag muligvis kun understøtter aspect-ratioikke-udskiftet indhold. Absolut værd at holde øje med browserstøtten, når den udvikler sig.

Det fungerer alene uden at angive et widthellerheight

Så ja, vi kan simpelthen slippe det på et element som dette:

.element ( aspect-ratio: 16 / 9; )

... og elementets standard width: autospark implicit ind for at indstille elementets dimensioner.

Det ændres, når widtheller heighter på det samme element

Lad os sige, at vi har et element med en bredde på 300pxog en aspect-ratioaf 3/1.

.element ( aspect-ratio: 3 / 1; width: 300px; )

Af natur aspect-ratioønsker at beregne elementets dimensioner alene og vil gøre det ud fra den sammenhæng, hvor det bruges. Men med det widthkastet ind fortæller det billedformat at beregne elementets billedformatboks ved hjælp af 300pxsom bredden. Som et resultat er det som om vi bare er skrevet:

.element ( height: 100px; width: 300px; )

Dette giver mening! Husk, at når ingen widtheller heighter angivet, antager browseren, at de er autoog går derfra. Når vi leverer eksplicit widthog heightværdier, er det det, der bliver vant.

Det ignoreres i nogle situationer

Det er her, tingene bliver lidt mind-bendy, fordi der er tilfælde, hvor aspect-ratiodet overses, eller dets beregninger er påvirket af andre egenskaber. Dette inkluderer:

Når begge widthog heighterklæres på elementet

Vi så lige, hvordan deklarering af enten widtheller heighttil og element vil påvirke beregningen af aspect-ratio. Men hvis elementet allerede har både a widthog height, bliver de brugt i stedet for aspect-ratio. Det kræver, at begge egenskaber tilsidesættes aspect-ratio; indstilling af enten heighteller widthalene bryder ikke elementets billedformat.

Gør sener, ikke? Hvis du bruger en af widtheller heighttvinger den aspect-ratiotil at bruge denne værdi i beregningen, følger det logisk, at brug af begge dele helt vil tilsidesætte, aspect-ratioda begge værdier allerede er angivet og indstillet.

Når indhold bryder ud af forholdet

Kort sagt, hvis du har et element med et billedformat, og indholdet er så langt, at det tvinger elementet til at udvide, vil elementet udvides. Og hvis elementet udvides, ændres dets dimensioner og dermed ikke mere billedformat. Dette er grunden til specifikationen, at egenskaben indstiller det "foretrukne" formatforhold. Det foretrækkes, men ikke ordineres.

Kan du ikke lide, hvordan det fungerer? Indstilling min-height: 0;af elementet gør det muligt for indholdet at løbe over det foretrukne billedformat i stedet for at udvide det.

Når det "mister" til min-*og max-*egenskaber

Vi har lige set, hvordan det fungerer, ikke? Når indholdet overstiger boksens dimensioner, aspect-ratioer det effektivt væk, fordi feltet udvides med indholdet. Vi kan tilsidesætte det med min-width: 0.

Det skyldes, at alle egenskaber min-*og max-*egenskaber typisk kæmper widthog heightfor overherredømme i krigen over Box Model-beregninger. For eksempel:

.element ( min-width: 500px; /* ? Winner! */ width: 100px; )

Men:

.element ( min-width: 500px; width: 700px; /* ? Winner! */ )

Det skyldes, at min-widthdet enten forhindres widthi at gå under en bestemt værdi, eller at det ignoreres, fordi det widthallerede har indstillet elementet ud over den mindste bredde, det skal være. Det samme gælder for min-height, max-widthog max-height.

Pointen med alt dette: hvis vi indstiller både a min-*eller max-*egenskab på det samme element som, aspect-ratioog de "vinder" over widtheller height, så vil disse tilsidesætte aspect-ratio. Fortalte dig, at det var lidt mind-bendy. ?

Browsersupport

IE	Edge	Firefox	Chrome	Safari	Opera
Ingen	Ingen	86 1,2,3	90 4	TP 5	Ingen

Android Chrome	Android Firefox	Android-browser	iOS Safari	Opera Mobile
Ingen	Ingen	Ingen	Ingen	Ingen

Mere information

Artikel den 1. juli 2020

Et første kig på `billedformat`

Sara Cope