Stjórna myndhlutföllum með CSS3

Efni.

• 01. Hlutur-passa
• 02. Hlutastaða
• 03. Varðveita hlutfall
• 04. Að ganga yfir myndhlutfall
• 05. Umbreytingaráhrif
• 06. Yfirlit
• Líkaði þetta? Lestu þessar!

• Þekkingar þörf: Millistig HTML og CSS
• Krefst: Textaritill, Opera 11 + / WebKit á kvöldin / aðrir vafrar sem styðja
• Verkefnatími: Fljótari en þú heldur
• Stuðningsskrá

Þessi grein birtist fyrst í tölublaði 214 í .net tímaritinu.

Stjórna stærðarhlutfalli skiptra þátta, svo sem img> eða myndband>, getur verið sársauki. Til dæmis gætirðu viljað að allar myndir taki sama pláss á síðu en skekki ekki og missi hlutföll þegar einhver notar myndskrá sem er ekki í réttri stærð.

Að breyta stærð og bréfakassa myndina lítillega til að varðveita stærðarhlutfallið er miklu glæsilegri lausn en að klemma og teygja á mynd til að passa. Eða þú gætir viljað fara þveröfuga leið og knýja fram bréfakassa hluti, svo sem HTML5 myndband>s, til að vera í samræmi við ákveðna breidd og hæð. Kannski viltu að öll myndskeið séu í sérstöku hlutföllum og viljir lausn þar sem þau með mismunandi hlutföll birtast sjálfkrafa rétt?

Þetta vandamál er enn óþægilegra þegar þú ert að vinna með CMS sem hefur marga innihaldshöfunda að hlaða upp myndskeiðum og myndum, sérstaklega ef þeir eru notendur á móti starfsmönnum. Þú vilt kerfi sem vinnur frá miðöldum svo það birtist stöðugt, en svona hluti er ansi erfiður og krefst JavaScript til að fá aðgang að og vinna með stærðir á flugu, fullt af CSS brögðum eða mikið af erfiði forvinnslu með tungumáli miðlara. svo sem PHP.

CSS3 býður upp á auðvelt svar sem stendur nálægt sjóndeildarhringnum. Vinnudrög CSS myndgildis og endurnýjaðs innihalds einingar skilgreina eiginleika sem kallast hlutafall og miðar að því að leysa nákvæmlega svona vandamál. Og þessi eining inniheldur einnig skylda eign, hlutastöðu, sem þú getur notað til að stilla lárétta og lóðrétta stöðu innihaldsins innan frumefnisins. Allt sem þú þarft til að skoða dæmin hér að fullu er stuðningsvafri, svo sem Opera 11, eða WebKit á kvöldin. Áður en við lítum á nokkur dæmi skulum við kanna grundvallar setningafræði nýju eiginleikanna.

01. Hlutur-passa

Þú getur sótt um mótmæla-passa við hvaða frumefni sem skipt er um. (Skiptur þáttur er sá sem innihald og útlit er skilgreint af ytri auðlind eins og mynd, myndbandi eða SVG skrá.) Kóðinn er sem hér segir:

img {
hæð: 100px;
breidd: 100 pixlar;
hlut-passa: innihalda;
}

Athugaðu að í kóða sýnishornum og dæmum fyrir þessa grein stillum við breidd og hæð skiptra þátta okkar í CSS. Hlutur-passa tekur einnig gildi þegar víddir hafa verið tilgreindar með HTML eiginleikum; þetta er samt ekki svo góð hugmynd. Í vöfrum sem styðja ekki þessa CSS eign, þá myndi þetta leiða til þess að þeir þættir sem koma í stað líta alltaf út fyrir að vera kramaðir eða teygðir, nema auðvitað að þú hafir afturúrlausn til staðar, svo sem PHP forvinnsla á fjölmiðlavíddum. Þess í stað sleppum við málunum og leyfum vöfrum einfaldlega að sýna þær með eigin stærðum. Sú aðferð sem hentar þér best fer eftir sérstökum aðstæðum þínum.

Hlutur-passa hefur fjögur möguleg gildi, sem eru eftirfarandi:

• innihalda: Ef þú hefur valið sérstaka hæð og breidd á þætti sem skipt er út, hlut-passa: innihalda; mun valda því að stærðin á innihaldinu (td myndinni) verður breytt þannig að það birtist að fullu með innra hlutföllum varðveitt en samt passar það innan þeirra vídda sem settar eru fyrir frumefnið.

• Fylla: Þessi stilling veldur því að innihald frumefnisins stækkar til að fylla að fullu víddirnar sem það er stillt fyrir, jafnvel þó að það brjóti innra hlutfall þess.
• þekja: Með því að nota þessa stillingu er varðveitt innra hlutföll innihalds frumefnisins, en breytt breidd og hæð þannig að innihaldið nær algjörlega yfir frumefnið. Minni breiddin og hæðin er gerð til að passa nákvæmlega við frumefnið og stærri víddin flæðir yfir frumefnið.
• enginn: Þegar þú notar gildið enginn, innihaldið hunsar algjörlega hvaða hæð eða þyngd sem er stillt á frumefnið og notar bara innri mál frumefnisins. Þó að gildi enginn var í upprunalegu forskriftinni og er studd í Opera, það var síðan fjarlægt í seinni endurskoðun á tækninni. Það getur þó snúið aftur í endurtekningu í framtíðinni.ATH: Til að sjá betur hvernig þessi gildi hafa áhrif á hlutföll myndar, vinsamlegast vísaðu til object-fit-diagram.png í kennsluskrám

02. Hlutastaða

Hlutastaða virkar á nákvæmlega sama hátt og bakgrunnur-staða gerir fyrir bakgrunnsmyndir og getur tekið sömu gildi (pixlar, ems, prósentur, lykilorð osfrv.). Það tilgreinir staðsetningu innihalds frumefnis innan svæðisins. Til dæmis:

img {
hæð: 100px;
breidd: 100 pixlar;
hlut-passa: innihalda;
hlutastaða: 75% efst;
}

Í Opera, mótmæla-passa getur einnig tekið gildi af farartæki, sem er sjálfgefið ef eignin er ekki tilgreind. Það er aðeins til í raun til að halda aftur á eindrægni og gera þér kleift að hnekkja fyrri stillingum.

03. Varðveita hlutfall

Stundum nefnt bréfakassi, það eru tímar þegar þú vilt varðveita stærðarhlutföll myndanna á síðu og láta þær passa á sama svæði. Til dæmis gætirðu haft innihaldsstjórnunarkerfi sem gerir þér kleift að hlaða vörum inn á netverslunarsíðu eða myndir fyrir myndasafn, með fullt af mismunandi höfundum efnis.

Þeir geta sent inn myndir í nokkurn veginn í réttri stærð, en málin eru ekki alltaf nákvæm, óháð neinum leiðbeiningum sem þú kannt að birta! Í þessu tilfelli gætirðu breytt hlutföllum til að gera myndirnar allar á nákvæmlega sama svæði, en það mun líklega líta hræðilega út.

Hinn möguleikinn er að bréfa kassann á myndirnar. Þetta lítur miklu betur út, en það er nokkuð flókið að ná fram á viðskiptavinarhliðina með núverandi vafrastuðningi. Þú gætir auðvitað notað einhvers konar lausn á netþjóni til að vinna úr myndunum fyrirfram, en þetta er aftur flókið og bætir við meiri kostnað.

Þú getur tekist mjög vel á við þetta vandamál með mótmæla-passa:

img {
breidd: 150px;
hæð: 150px;
...
hlut-passa: innihalda;
}

Í dæminu mínu eru smámyndirnar allar stilltar á sömu breidd og hæð, en hlut- passa: innihalda; neyðir allar myndirnar til að passa inni á sama svæði og viðhalda stærðarhlutfalli. Enn betri lausn, það fer eftir forriti þínu, gæti verið að viðhalda stærðarhlutföllum, en breyta stærð og uppskeru myndarinnar svo hún umvefji img> frumefni.

Þetta er hægt að gera auðveldlega með því að skipta um það hlut-passa: innihalda; með hlut-passa: kápa; og bæta við flæða: falið; við blönduna:

img {
...
hlut-passa: kápa;
flæða: falið;
}

Í þessu tilfelli, hlut-passa: kápa; fær myndirnar til að auka stærð til að umvefja img> þætti, og flæða: falið; saxar af myndasvæðinu sem hellist utan þessara þátta (kíktu á object-fit-cover-images.html í sýnisskrám).

04. Að ganga yfir myndhlutfall

Í næsta dæmi okkar erum við að taka myndband með bilað stærðarhlutfall og neyða það til að breyta stærðarhlutfalli og passa vel inn í myndband> stærð frumefna sem við höfum tilgreint. Af hverju viltu gera þetta? Kannski eru sum myndskeiðin sem ritstjórar efnisins þíns hlaða upp í CMS með bilað hlutfall og þú vilt til dæmis laga þau öll á flugu.

Hlutir sem passa: fylla; gerir okkur kleift að gera þetta í einu vetfangi. Til að skýra málið, okkar mótmæla-passa: fylla; mynddæmi (sjá object-fit-fill-video.html í kóðadæmunum) notar par af myndband> þætti, sem hér segir:

myndskeiðsstýringar = "stýrir" src = "windowsill.webm" width = "426" height = "240">
/ myndband>
vídeó stjórna = "stjórna" src = "windowsill.webm" breidd = "426" hæð = "240"
>
/ myndband>

Jafnvel þó að myndband> þættir hafa breiddar- og hæðareiginleika sem tilgreindir eru í merkingunni, þeir birtast sjálfgefið í bréfalúgu, þar sem þeir hafa annað hlutföll.

The myndband> frumefni mun alltaf reyna að viðhalda innra hlutfalli upprunaskrárinnar.

Til að laga þetta höfum við neytt öll vídeó til að falla að breidd og hæð myndband> þætti með því að beita hlut-passa: fylla;:

.object-fit {
...
mótmæla-passa: fylla;
}

Þetta lætur öll myndskeiðin birtast í sama hlutföllum.

05. Umbreytingaráhrif

Sameina mótmæla-passa og hlutastaða með CSS umbreytingum getur leitt til nokkurra áhugaverðra áhrifa fyrir mynd- eða myndasöfn:

Í þessu dæmi (sjá object-fit-none-transformations.html, í kennsluskrám), hef ég tekið myndasafnið sem við sáum í fyrsta dæminu og:

• Losnaði við miðlæga staðsetningu dæmisins og skipti um stöðu myndanna og myndatexta til að gefa myndinni meira svigrúm til að stækka.
• Algerlega staðsett alla aðra divs> sem innihalda myndir og myndatexta þeirra svo þær birtist allar á sama stað og falda þær sjálfgefnar með því að nota ógagnsæi: 0;.
• Bætti við settum leiðsögutenglum efst í dæminu til að fara á milli mismunandi mynda / myndatexta og notaði :skotmark gerviflokkur auk umbreytinga til að láta þær birtast vel og hverfa þegar krækjunum er hjólað í gegnum (já, það er leið til að búa til flipavísitölu án þess að nota JavaScript).
• Bætt við tabindex og aðgangslyklar til að gera krækjurnar og myndirnar aðgengilegar eingöngu með lyklaborðinu.
• Mikilvægast er að því er varðar þessa grein, skipti út hlut-passa: innihalda; CSS fyrir eftirfarandi:

img {
breidd: 150px;
hæð: 150px;
...
mótmæla-passa: enginn;
flæða: falið;
mótmæla-staða: 25% 50%;
umskipti: 1s allir;
...
}
img: sveima, img: fókus {
...
hæð: 400px;
breidd: 400 px;
}

Þegar þú færir þig yfir hinar ýmsu smámyndir tekurðu eftir því að myndirnar eru ekki skroppnar saman til að passa við frumefnið.

Í staðinn er aðeins lítill hluti myndarinnar sýndur og frumefnið vex til að sýna meira af myndinni. Hvað gefur?

Með því að stilla mótmæla-passa: enginn; á img> frumefni, ég segi innihaldi þeirra að hunsa algerlega breiddina og hæðina sem var stillt fyrr og hella sér út úr hliðum þáttanna.

Þar sem innri stærð myndaskrárinnar er miklu stærri en þær stærðir sem tilgreindar eru fyrir img> þætti, hef ég notað flæða: falið; að skera upp allt sem hellist út.

Umskipti eru síðan notuð til að auka stærð skjásins mjúklega img> frumefni þegar það er sveimað / einbeitt, sem sýnir meira af myndinni.

Og það er ekki allt. Ég hef líka notað mótmæla-staða: 25% 50%; eign til að færa stöðu myndarinnar á img> frumefni yfir til hægri svolítið, sem skapar falleg innihaldsljósandi áhrif.

06. Yfirlit

Þessi kennsla hefur sýnt nokkrar hugmyndir um notkun mótmæla-passa og hlutastaða. Þú getur fundið fleiri dæmi á Opera’s mótmæla-passa próf svíta síðu. Við hlökkum til að sjá hvaða dæmi þú býrð til og láta okkur alltaf vita hvað þér finnst
framkvæmd okkar.

Chris er framkvæmdastjóri sambands stjórnanda hjá Opera og spilar einnig með þungarokks rokk guðunum Conquest of Steel.

Líkaði þetta? Lestu þessar!

• Hvernig á að smíða app
• Ókeypis hugbúnaður fyrir grafíska hönnun í boði núna!
• Búðu til fullkomið stemningartöflu með þessum ráðum
• The fullkominn leiðarvísir fyrir lógó hönnun