Kontrollige pildi kuvasuhteid CSS3 abil

  • Vajalikud teadmised: Vahepealne HTML ja CSS
  • Vajab: Tekstiredaktor, Opera 11 + / WebKit öösel / muud toetavad brauserid
  • Projekti aeg: Kiirem kui arvata oskaks
  • Tugifail

See artikkel ilmus esmakordselt ajakirja .net 214. numbris.

Asendatud elementide kuvasuhte kontrollimine, näiteks või , võib olla piin. Näiteks võite soovida, et kõik pildid hõivaksid lehel sama ruumi, kuid ei moonutaks ega kaotaks oma kuvasuhet, kui keegi kasutab sobimatu suurusega pildifaili.

Kujutise suhte säilitamiseks on pildi suuruse muutmine ja kirjakasti pisut lisamine palju elegantsem lahendus kui pildi kokkusurumine ja sobivaks venitamine. Või võiksite minna vastupidi ja sundida postkastiga üksusi, näiteks HTML5 s, vastama kindlale laiusele ja kõrgusele. Võib-olla soovite, et kõik videod oleksid kindla kuvasuhtega ja soovite lahendust, kus erineva kuvasuhtega videod kuvatakse automaatselt õigesti?

See probleem on veelgi ebamugavam, kui töötate CMS-iga, kus mitu sisuautorit laadib üles videoid ja pilte, eriti kui nad on lõppkasutajad, mitte töötajad. Soovite süsteemi, mis töötleb meediumit nii, et see kuvataks järjepidevalt, kuid selline asi on üsna keeruline, mis nõuab JavaScripti, et pääseda juurde suurustele lennult ja manipuleerida, palju CSS-i trikke või palju töömahukat eeltöötlust serveripoolse keelega nagu näiteks PHP.

CSS3 pakub lihtsat vastust, mis on praegu silmapiiril. The CSS-i pildiväärtused ja asendatud sisu mooduli tööjoonis määratleb omaduse nimega object-fit, mille eesmärk on lahendada täpselt sedasorti probleeme. Ja see moodul sisaldab ka seotud atribuuti, object-position, mida saate kasutada sisu horisontaalse ja vertikaalse asukoha määramiseks elemendi sees. Siinsete näidete täielikuks kontrollimiseks on vaja ainult toetavat brauserit, nagu Opera 11 või öösel WebKiti. Enne mõnede näidete vaatamist uurime uute omaduste põhisüntaksi.

01. Objekti sobivus

Võite edukalt kandideerida objektile sobiv mis tahes asendatud elemendile. (Asendatud element on igaüks, mille sisu ja välimuse määrab väline ressurss, näiteks pilt, video või SVG-fail.) Kood on järgmine:

img {
kõrgus: 100px;
laius: 100px;
object-fit: sisaldama;
}

Pange tähele, et selle artikli koodinäidetes ja näidetes määrasime CSS-is oma asendatud elementide laiuse ja kõrguse. Objekti sobivus jõustub ka siis, kui mõõtmed on HTML-atribuutide abil määratud; see pole aga nii hea idee. Brauserites, mis seda CSS-i atribuuti ei toeta, näeksid need asendatud elemendid alati kokkutõmmatud või venitatud, välja arvatud juhul, kui teil on muidugi varulahendus, näiteks meediumimõõtmete eeltöötlus PHP-s. Selle asemel jätame mõõtmed välja ja laseme brauseritel neid lihtsalt oma sisemiste suuruste abil kuvada. Teie jaoks kõige paremini toimiv lähenemine sõltub teie konkreetsest olukorrast.

Objekti sobivus on neli võimalikku väärtust, mis on järgmised:

  • sisaldama : Kui olete asendatud elemendile määranud selgesõnalise kõrguse ja laiuse, object-fit: sisaldama; põhjustab sisu (nt pildi) suuruse muutmise nii, et see kuvatakse täielikult koos sisemise kuvasuhtega, kuid see mahub siiski elemendile määratud mõõtude sisse.

Object-fit: sisaldama; paneb kõik pildid säilitama kuvasuhte ja mahtuma samasse piirkonda. See on eksperimentaalne, kuid kindlasti tuleb see varsti teie lähedal asuvasse brauserisse

Object-fit: sisaldama; paneb kõik pildid säilitama kuvasuhte ja mahtuma samasse piirkonda. See on eksperimentaalne, kuid kindlasti tuleb see varsti teie lähedal asuvasse brauserisse
  • täitke : See seade põhjustab elemendi sisu laienemise, et see täidaks talle määratud mõõtmed, isegi kui see selle sisemist kuvasuhet purustab.
  • kate : Selle sätte kasutamine säilitab elemendi sisemise kuvasuhte, kuid muudab laiust ja kõrgust nii, et sisu kataks elemendi täielikult. Väiksem laiusest ja kõrgusest tehakse elemendile täpselt sobivaks ning suurem mõõt ületab elemendi.
  • ükski: Kui kasutate väärtust mitte ühtegi , eirab sisu täielikult elemendile seatud kõrgust või kaalu ning kasutab lihtsalt asendatud elemendi sisemõõtmeid. Kuigi väärtus mitte ühtegi oli algses spetsifikatsioonis ja seda toetab Opera, see eemaldati seejärel spetsifikatsiooni hilisemas versioonis. Tulevases korduses võib see siiski naasta. MÄRKUS. Kui soovite selgemalt näha, kuidas need väärtused pildi kuvasuhet mõjutavad, vaadake palun object-fit-diagram.png õpetusfailides

Nihutatud kuvasuhtega pildid tunduvad kohutavad. Naine on pigistanud, muutes ta pulga kuju, poiss on aga venitatud, muutes ta paksuks

Nihutatud kuvasuhtega pildid tunduvad kohutavad. Naine on pigistanud, muutes ta pulga kuju, poiss on aga venitatud, muutes ta paksuks

02. Objekt-positsioon

Objekt-positsioon töötab täpselt samamoodi nagu taust-positsioon teeb seda taustapiltide jaoks ja võib võtta samad väärtused (pikslid, emid, protsendid, märksõnad jne). See määrab asendatud elemendi sisu positsiooni selle elemendi piirkonnas. Näiteks:

img {
kõrgus: 100px;
laius: 100px;
object-fit: sisaldama;
objekti positsioon: ülemine 75%;
}

Ooperis objektile sobiv võib võtta ka väärtuse automaatne , mis on vaikimisi, kui vara pole täpsustatud. See on tegelikult olemas ainult tagurpidi ühilduvuse säilitamiseks ja varasemate seadete alistamiseks.

03. Säilitusaste

Mõnikord nimetatakse seda postkastiks, kuid mõnikord on vaja säilitada piltide kuvasuhe lehel ja panna need samasse piirkonda mahtuma. Näiteks võib teil olla sisuhaldussüsteem, mis võimaldab teil poodidele üles laadida tooteid või pilte galerii jaoks, kus on palju erinevaid sisuloojaid.

Piltide postkasti paigutamine tähendab, et neid reprodutseeritakse algse kuvasuhtega, mis muudab katsealused taas oma tegeliku väljanägemisega

Piltide postkasti paigutamine tähendab, et neid reprodutseeritakse algse kuvasuhtega, mis muudab katsealused taas oma tegeliku väljanägemisega

Nad võivad pilte üles laadida umbes õiges suuruses, kuid mõõtmed pole alati täpsed, olenemata avaldatud juhistest! Sellisel juhul võiksite muuta kuvasuhet, et kõik pildid sobiksid täpselt samasse piirkonda, kuid see näeb ilmselt jube välja.

Teine võimalus on piltide postkast. See näeb palju parem välja, kuid praeguse brauseritugevusega on seda kliendipoolel üsna keeruline saavutada. Piltide eeltöötlemiseks võiksite muidugi kasutada mingisugust serveripoolset lahendust, kuid see on jällegi keeruline ja lisab üldkulusid.

Selle probleemiga saate tõesti lihtsalt hakkama objektile sobiv :

img {
laius: 150px;
kõrgus: 150px;
...
object-fit: sisaldama;
}

Sisse minu näide , on kõik pisipildid seatud samale laiusele ja kõrgusele, kuid object- fit: sisaldama; sunnib kõiki pilte mahtuma ühte piirkonda ja säilitama kuvasuhet. Veelgi parem lahendus võib olenevalt teie rakendusest olla kuvasuhte säilitamine, kuid muutke pildi suurust ja kärpimist, et see ümbritseks täielikult element.

Seda saab teha lihtsalt, asendades object-fit: sisaldama; koos objekti sobivus: kate; ja lisades ülevool: varjatud; segule:

img {
...
objekti sobivus: kate;
ülevool: varjatud;
}

Sel juhul, objekti sobivus: kate; muudab pildi suuruse suuremaks, et pilt täielikult ümbritseda elemendid ja ülevool: varjatud; siis tükeldage pildi ala, mis neist elementidest välja valgub (vaadake object-fit-cover-images.html näidisfailides).

Siin pannakse pildid katma elemendi üle objekti sobivusega: kate; ja kärbitakse suuruse järgi ülevoolu abil: peidetud;

04. Video kuvasuhte alistamine

Järgmises näites võtame katkise kuvasuhtega video ja sunnime seda muutma kuvasuhet ja sobituma tihedalt meie määratud elemendi suurus. Miks sa seda teha tahaksid? Võib-olla on mõnel videol, mille teie sisutoimetajad teie CMS-i üles laadivad, kuvasuhe katki ja soovite näiteks need kõik lennult parandada.

Object-fit: täitke; võimaldab meil seda teha ühe hoobiga. Punkti illustreerimiseks on meie object-fit: täitma; video näide (vt object-fit-fill-video.html koodinäidetes) kasutab paari järgmised elemendid:



Kuigi elementidel on märgistuses määratud laiuse ja kõrguse atribuudid, vaikimisi kuvatakse need kirjakastis, kuna neil on erinev kuvasuhe.

Vaikimisi säilitab lehele manustatud video alati sisemise kuvasuhte, muutudes vajadusel kirjakasti

Vaikimisi säilitab lehele manustatud video alati sisemise kuvasuhte, muutudes vajadusel kirjakasti

The element püüab alati säilitada lähtefaili sisemise kuvasuhte.

Selle parandamiseks oleme sundinud kõiki videoid vastama video laiusele ja kõrgusele elemente rakendades object-fit: täitma; :

.objekt-sobiv {
...
object-fit: täitma;
}

See muudab kõigi videote kuvamise sama kuvasuhtega.

Object-fit: täitke; alistab vaikekäitumise, pannes videod oma elementide määratud laiuse ja kõrguse omandama

Object-fit: täitke; alistab vaikekäitumise, pannes videod oma elementide määratud laiuse ja kõrguse omandama

05. Üleminekuefektid

Kombineerimine objektile sobiv ja objekti-positsiooni CSS-i üleminekutega võib piltide või videogaleriide jaoks olla päris huvitavaid efekte:

Mina

Olen muutnud pildigalerii vahva vahelehtedega liideseks, kasutades natuke: sihtmärkide trikke

Mina

Olen kasutanud ka üleminekute kombinatsiooni, object-fit: puudub; ja ülevool: varjatud; laheda laieneva efekti saavutamiseks

Selles näites (vt object-fit-none-transitions.html , õpetuste failides), võtsin esimeses näites nähtud pildigalerii ja:

  • Vabanes näite tsentreeritud positsioneerimisest ning vahetas piltide ja pealdiste asukohta, et pildil oleks rohkem ruumi laienemiseks.
  • Absoluutselt paigutatud kõik erinevad mis sisaldavad pilte ja nende pealdisi, nii et need kõik kuvatakse ühes ja samas peidetud vaikimisi läbipaistmatus: 0; .
  • Lisas näite ülaosas navigeerimislinkide komplekti, et liikuda erinevate piltide / pealdiste komplektide vahel, ja kasutas nuppu : sihtmärk pseudoklassi pluss üleminekud, et need sujuvalt ilmuksid ja kaoksid, kui linke tsükliga ringi käiakse (jah, see on viis luua vahelehtede register ilma JavaScripti kasutamata).
  • Lisatud tabindex ja pääsuklahvid linkide ja piltide juurdepääsetavaks muutmiseks ainult klaviatuuril.
  • Kõige tähtsam on selle artikli tähenduses vahetatud object-fit: sisaldama; CSS järgmise jaoks:

img {
laius: 150px;
kõrgus: 150px;
...
objekti sobivus: puudub;
ülevool: varjatud;
objekti positsioon: 25% 50%;
üleminek: 1s kõik;
...
}
img: hõljumine, img: fookus {
...
kõrgus: 400px;
laius: 400px;
}

Erinevatel pisipiltidel liikudes märkate, et pilte ei vähendata elemendile sobivaks.

Selle asemel kuvatakse ainult väike osa pildist ja element kasvab, et rohkem pilti kuvada. Mis annab?

Seadistades objekti sobivus: puudub; kohta Ütlen, et nende sisu ignoreeriks täielikult varem seatud laiust ja kõrgust ning valguks elementide külgedest välja.

Kuna pildifailide sisemine suurus on palju suurem kui faili jaoks määratud mõõtmed elemente, olen kasutanud ülevool: varjatud; kärpida kõike, mis välja valgub.

Seejärel kasutatakse üleminekut sujuvalt suuruse suurendamiseks element, kui see on hõljutatud / fokuseeritud, mis näitab rohkem pilti.

Ja see pole veel kõik. Olen kasutanud ka objekti positsioon: 25% 50%; atribuut pildi positsiooni teisaldamiseks element veidi paremale, mis loob kena sisu paljastava efekti.

06. Kokkuvõte

Selles õpetuses on esitatud mõned ideed, kuidas seda kasutada objektile sobiv ja objekti-positsiooni . Rohkem näiteid leiate Opera lehelt objektile sobiv test sviitide leht . Ootame põnevusega, milliseid näite te loote, ja andke meile alati teada, mida te arvate
meie rakendamine.

Opera arendaja suhete juht, Chris mängib ka heavy metal rock jumalatega Terase vallutamine .

Meeldis see? Loe neid!