Kontroller billedformat med CSS3

  • Nødvendig viden: Mellemliggende HTML og CSS
  • Kræver: Teksteditor, Opera 11 + / WebKit om natten / andre understøttende browsere
  • Projekt Tid: Hurtigere end du måske tror
  • Supportfil

Denne artikel dukkede først op i nummer 214 af .net magazine.

Kontrol af billedformatet for udskiftede elementer, f.eks eller , kan være en smerte. For eksempel vil du muligvis have, at alle billeder optager samme plads på en side, men ikke forvrænger og mister billedformatet, når nogen bruger en billedfil, der ikke har den rigtige størrelse.

Ændring af størrelse og brevboks i billedet lidt for at bevare billedformatet er en meget mere elegant løsning end at klemme og strække et billede, så det passer. Eller du vil måske gå den modsatte vej og tvinge postkasser, f.eks. HTML5 s, til at passe til en bestemt bredde og højde. Måske vil du have, at alle videoer skal have et specifikt billedformat og ønsker en løsning, hvor videoer med forskellige billedformater automatisk vises korrekt?



Dette problem er endnu mere akavet, når du arbejder med et CMS, der har flere indholdsforfattere, der uploader videoer og billeder, især hvis de er slutbrugere i modsætning til medarbejdere. Du vil have et system, der behandler medier, så det vises konsekvent, men denne slags ting er ret vanskelige, idet JavaScript kræves for at få adgang til og manipulere størrelser på farten, masser af CSS-trickery eller masser af besværlig forbehandling med et serversidesprog. såsom PHP.

CSS3 giver et let svar, der i øjeblikket er tæt ved horisonten. Det CSS-billedværdier og udskiftet indhold modulets arbejdsudkast definerer en egenskab kaldet object-fit, som har til formål at løse nøjagtigt denne slags problemer. Og dette modul indeholder også en relateret egenskab, objekt-position, som du kan bruge til at indstille den vandrette og lodrette position af indholdet inde i elementet. Alt hvad du behøver for fuldt ud at tjekke eksemplerne her er en understøttende browser, såsom Opera 11 eller en WebKit om natten. Før vi fortsætter med at se på nogle eksempler, lad os undersøge den grundlæggende syntaks for de nye egenskaber.

01. Objektpasning

Du kan med succes ansøge objekt-fit til ethvert udskiftet element. (Et udskiftet element er enhver, hvis indhold og udseende er defineret af en ekstern ressource, såsom et billede, en video eller en SVG-fil.) Koden er som følger:

img {
højde: 100px;
bredde: 100 px;
objekt-fit: indeholde;
}

hvordan man laver din egen pen

Bemærk, at vi i kodeeksemplerne og eksemplerne til denne artikel indstiller bredden og højden på vores udskiftede elementer i CSS. Objekt-fit træder også i kraft, når dimensionerne er specificeret ved hjælp af HTML-attributter; dette er dog ikke sådan en god idé. I browsere, der ikke understøtter denne CSS-egenskab, vil dette resultere i, at de udskiftede elementer altid ser sammenpresset eller strakt ud, medmindre du selvfølgelig har en reserveløsning på plads, såsom PHP-forbehandling af mediedimensionerne. I stedet udelader vi derfor dimensionerne og lader browsere blot vise dem ved hjælp af deres iboende størrelser. Den tilgang, der fungerer bedst for dig, afhænger af din specifikke situation.

Objekt-fit har fire mulige værdier, som er som følger:

  • indeholde : Hvis du har indstillet en eksplicit højde og bredde på et udskiftet element, objekt-fit: indeholde; vil få indholdet (f.eks. billedet) til at blive ændret, så det vises fuldt ud med dets iboende billedformat bevaret, men det passer stadig ind i elementets dimensioner.

Objektpasning: indeholde; gør, at alle billeder opretholder billedformat og passer ind i det samme område. Det er eksperimentelt, men kommer snart til en browser i nærheden af ​​dig

Objektpasning: indeholde; gør, at alle billeder opretholder billedformat og passer ind i det samme område. Det er eksperimentelt, men kommer snart til en browser i nærheden af ​​dig
  • fylde : Denne indstilling får elementets indhold til at udvides til fuldstændigt at udfylde de dimensioner, der er indstillet til det, selvom dette ikke bryder dets indre billedformat.
  • dække over : Brug af denne indstilling bevarer elementets indholdsforhold, men ændrer bredden og højden, så indholdet helt dækker elementet. Den mindste af bredden og højden er tilpasset elementet nøjagtigt, og den større dimension overløber elementet.
  • ingen: Når du bruger værdien ingen , ignorerer indholdet fuldstændigt enhver højde eller vægt, der er indstillet på elementet, og bruger kun det udskiftede elementets iboende dimensioner. Selvom værdien ingen var i den originale specifikation og understøttes i Opera, blev den derefter fjernet i en senere revision af specifikationen. Det kan dog vende tilbage i en fremtidig iteration. BEMÆRK: For at se mere klart, hvordan disse værdier påvirker billedets billedformat, henvises der til object-fit-diagram.png i vejledningsfilerne

Billeder med forskudt billedformat ser forfærdelige ud. Kvinden er blevet klemt og får hende til at ligne en pindfigur, mens drengen er strakt og får ham til at se fed ud

Billeder med forskudt billedformat ser forfærdelige ud. Kvinden er blevet klemt og får hende til at ligne en pindfigur, mens drengen er strakt og får ham til at se fed ud

02. Objektposition

Objektposition fungerer på nøjagtig samme måde som baggrund-position gør for baggrundsbilleder og kan tage de samme værdier (pixels, ems, procenter, nøgleord osv.). Den specificerer placeringen af ​​et udskiftet elements indhold inden for området for det element. For eksempel:

img {
højde: 100px;
bredde: 100 px;
objekt-fit: indeholde;
objekt-position: top 75%;
}

I opera, objekt-fit kan også tage en værdi af auto , som er standard, hvis ejendommen ikke er specificeret. Det eksisterer kun for at bevare bagudkompatibilitet og gøre det muligt for dig at tilsidesætte tidligere indstillinger.

03. Bevar forholdet

Nogle gange kaldet letterboxing er der tidspunkter, hvor du ønsker at bevare billedformatet på billederne på en side og få dem til at passe inden for det samme område. For eksempel har du muligvis et indholdsstyringssystem, der giver dig mulighed for at uploade produkter på et e-handelswebsted eller billeder til et billedgalleri med mange forskellige indholdsforfattere.

Letterboxing af billederne betyder, at de gengives med det originale billedformat, hvilket får motivene til at se deres sande ud igen

Letterboxing af billederne betyder, at de gengives med det originale billedformat, hvilket får motivene til at se deres sande ud igen

De kan uploade billeder i nogenlunde den rigtige størrelse, men dimensionerne er ikke altid nøjagtige, uanset hvilke retningslinjer du måtte offentliggøre! I dette tilfælde kan du ændre billedformat for at få billederne til at passe i nøjagtigt det samme område, men det vil sandsynligvis se forfærdeligt ud.

hvordan man gør facebook-forsidefoto privat

Den anden mulighed er at postkasse billederne. Dette ser meget bedre ud, men det er ret kompliceret at opnå på klientsiden med den aktuelle browsersupport. Du kan selvfølgelig bruge en slags server-side-løsning til forbehandling af billederne, men dette er igen komplekst og tilføjer mere overhead.

Du kan håndtere dette problem virkelig nemt med objekt-fit :

img {
bredde: 150px;
højde: 150px;
...
objekt-fit: indeholde;
}

I mit eksempel , miniaturebillederne er alle indstillet til at have samme bredde og højde, men objekt-fit: indeholde; tvinger alle billederne til at passe ind i det samme område og opretholde billedformat. En endnu bedre løsning, afhængigt af din applikation, kan være at opretholde billedformat, men ændre billedets størrelse og beskæring, så det helt omslutter element.

Dette kan gøres let ved at erstatte det objekt-fit: indeholde; med objekt-fit: dække; og tilføje overløb: skjult; til blandingen:

img {
...
objekt-fit: dække;
overløb: skjult;
}

I dette tilfælde, objekt-fit: dække; får billederne til at øge størrelsen for helt at omslutte elementer og overløb: skjult; hugg derefter det billedområde, der spilder uden for disse elementer (tjek ud object-fit-cover-images.html i prøvefilerne).

Her er billederne lavet til at dække over elementet med objekt-fit: cover; og trimmet til størrelse ved hjælp af overløb: skjult;

04. Tilsidesættelse af en videos billedformat

I vores næste eksempel tager vi en video med et brudt billedformat og tvinger den til at ændre billedformat og passe tæt ind i elementstørrelse, vi har specificeret. Hvorfor vil du gøre dette? Måske har nogle af de videoer, som din indholdsredaktør uploader til dit CMS, et brudt billedformat, og du vil f.eks. Rette dem alle på farten.

Objekt-fit: fyld; gør os i stand til at gøre dette på én gang. For at illustrere pointen er vores objekt-fit: fyld; videoeksempel (se object-fit-fill-video.html i kodeeksemplerne) bruger et par elementer som følger:



Selvom elementer har bredde- og højdeattributter, der er angivet i markeringen, som standard vises de i postkasse, da de har et andet formatforhold.

Som standard opretholder en video, der er indlejret i en side, det indre billedformat og bliver om nødvendigt letterbox

Som standard opretholder en video, der er indlejret i en side, det indre billedformat og bliver om nødvendigt letterbox

Det element vil altid forsøge at opretholde kildefilens indre billedformat.

For at løse dette har vi tvunget alle videoer til at tilpasse sig bredden og højden på elementer ved at anvende objekt-fit: fyld; :

.object-fit {
...
objekt-fit: fyld;
}

Dette får alle videoer til at vises i samme billedformat.

Objekt-fit: fyld; tilsidesætter standardadfærd, hvilket får videoer til at tage den indstillede bredde og højde på deres elementer

Objekt-fit: fyld; tilsidesætter standardadfærd, hvilket får videoer til at tage den indstillede bredde og højde på deres elementer

05. Overgangseffekter

Kombinerer objekt-fit og objekt-position med CSS-overgange kan føre til nogle ret interessante effekter for billed- eller videogallerier:

jeg

Jeg har forvandlet billedgalleriet til en pæn grænseflade ved hjælp af en smule af: target trickery

jeg

Jeg har også brugt en kombination af overgange, objekt-fit: ingen; og overløb: skjult; for en cool ekspanderende effekt

I dette eksempel (se object-fit-none-transitions.html , i tutorials-filerne), har jeg taget billedgalleriet, som vi så i det første eksempel, og:

  • Slap af med den centrerede positionering af eksemplet og byttede placeringen af ​​billederne og billedteksterne for at give billedet mere plads til at udvide.
  • Absolut placeret alle de forskellige indeholdende billeder og deres billedtekster, så de alle vises på samme sted og skjult dem alle som standard ved hjælp af uigennemsigtighed: 0; .
  • Tilføjet et sæt navigationslink øverst i eksemplet for at skifte mellem de forskellige billed- / billedtekstsæt og brugte :mål pseudo-klasse plus-overgange for at få dem til at virke jævnt og forsvinde, når linkene cykles igennem (ja, det er en måde at oprette et faneblad uden at bruge JavaScript).
  • Tilføjet tabindex og adgangstaster for at gøre links og billeder tilgængelige via tastaturet.
  • Vigtigst med henblik på anvendelsen af ​​denne artikel, byttet ud objekt-fit: indeholde; CSS for følgende:

img {
bredde: 150px;
højde: 150px;
...
objekt-fit: ingen;
overløb: skjult;
objekt-position: 25% 50%;
overgang: 1s alle;
...
}
img: svæve, img: fokus {
...
højde: 400px;
bredde: 400px;
}

Når du bevæger dig over de forskellige miniaturer, bemærker du, at billederne ikke er krympet ned for at passe til elementet.

I stedet vises kun en lille del af billedet, og elementet vokser og afslører mere af billedet. Hvad giver?

Ved at indstille objekt-fit: ingen; på den elementer, fortæller jeg, at deres indhold fuldstændigt ignorerer bredden og højden, der er indstillet tidligere, og spildes ud af elementernes sider.

tatovering kunstnere, der specialiserer sig i akvarel

Da billedfilernes iboende størrelse er meget større end de dimensioner, der er angivet for elementer, jeg har brugt overløb: skjult; at beskære alt, hvad der spilder ud.

En overgang bruges derefter til glat at øge størrelsen på element, når det svæves / fokuseres, hvilket afslører mere af billedet.

Og det er ikke alt. Jeg har også brugt objekt-position: 25% 50%; for at flytte billedets position på element lidt til højre over, hvilket skaber en dejlig indholdsafslørende effekt.

06. Resumé

Denne vejledning har vist nogle få ideer til, hvordan man bruger objekt-fit og objekt-position . Du kan finde flere eksempler på Opera's objekt-fit test suitesiden . Vi ser frem til at se, hvilke eksempler du opretter, og som altid fortælle os, hvad du synes om
vores implementering.

En manager for udviklerforhold for Opera, Chris spiller også med heavy metal rock guder Erobring af stål .

Kan du lide dette? Læs disse!