Ohjaa kuvan kuvasuhteita CSS3: lla

  • Tarvittava tieto: Väli-HTML ja CSS
  • Edellyttää: Tekstieditori, Opera 11 + / WebKit iltaisin / muut tukevat selaimet
  • Projektin aika: Nopeampi kuin luulisi
  • Tukitiedosto

Tämä artikkeli ilmestyi ensimmäisen kerran .net-lehden numerossa 214.

Korvattujen elementtien, kuten., Kuvasuhteen hallinta tai , voi olla tuskaa. Voit esimerkiksi haluta, että kaikki kuvat vievät saman tilan sivulla, mutta ne eivät vääristä ja menetä kuvasuhdetta, kun joku käyttää kuvatiedostoa, joka ei ole oikean kokoinen.



Kuvan koon muuttaminen ja postilaatikkoon asettaminen sivusuhteen säästämiseksi on paljon tyylikkäämpi ratkaisu kuin kuvan koukuttaminen ja venyttäminen sopivaksi. Tai voit haluta mennä päinvastoin ja pakottaa postilaatikkokohteita, kuten HTML5 s, tietyn leveyden ja korkeuden mukauttamiseksi. Ehkä haluat kaikkien videoiden olevan tietty kuvasuhde ja haluat ratkaisun, jossa eri kuvasuhteella olevat videot näkyvät automaattisesti oikein?



Tämä ongelma on vieläkin hankalampi, kun työskentelet sisällönhallintajärjestelmän kanssa, jossa useita sisällön tekijöitä lähettää videoita ja kuvia, varsinkin jos he ovat loppukäyttäjiä työntekijöiden sijaan. Haluat järjestelmän, joka käsittelee mediaa, jotta se näkyy tasaisesti, mutta tällainen asia on melko vaikeaa, vaatii JavaScriptiä pääsemään ja manipuloimaan kokoja lennossa, paljon CSS-huijauksia tai paljon työlästä esikäsittelyä palvelinpuolen kielellä kuten PHP.

CSS3 tarjoaa helpon vastauksen, joka on tällä hetkellä lähellä horisontissa. CSS-kuvan arvot ja korvattu sisältö moduulin työskentelyluonnos määrittelee ominaisuuden nimeltä objektisovitus, jonka tarkoituksena on ratkaista täsmälleen tällaiset ongelmat. Ja tämä moduuli sisältää myös siihen liittyvän ominaisuuden, object-position, jonka avulla voit asettaa sisällön vaaka- ja pystysuoran sijainnin elementin sisällä. Kaikki mitä sinun tarvitsee tarkistaa tässä olevat esimerkit on tukeva selain, kuten Opera 11 tai WebKit iltaisin. Ennen kuin tarkastelemme joitain esimerkkejä, tutkitaan uusien ominaisuuksien perussyntaksi.



01. Kohteen sovitus

Voit hakea esineeseen sopiva mihin tahansa korvattuun elementtiin. (Korvattu elementti on mikä tahansa, jonka sisällön ja ulkoasun määrittelee ulkoinen resurssi, kuten kuva-, video- tai SVG-tiedosto.) Koodi on seuraava:

img
korkeus: 100px;
leveys: 100px;
object-fit: sisältää;
}

pikakuvake uudelle tasolle Photoshopissa

Huomaa, että tämän artikkelin koodinäytteissä ja esimerkeissä asetamme korvattujen elementtien leveyden ja korkeuden CSS: ssä. Kohteen sovitus tulee voimaan myös, kun mitat on määritetty HTML-määritteillä; tämä ei kuitenkaan ole niin hyvä idea. Selaimissa, jotka eivät tue tätä CSS-ominaisuutta, tämä johtaisi siihen, että korvatut elementit näyttävät aina puristetuilta tai venytetyiltä, ​​ellei sinulla tietenkään ole vararatkaisua, kuten median ulottuvuuksien esikäsittelyä PHP: llä. Sen sijaan jätämme mitat pois ja annamme selainten näyttää ne yksinkertaisesti niiden sisäisen koon mukaan. Parhaiten sopiva lähestymistapa riippuu tilanteestasi.



Kohteen sovitus on neljä mahdollista arvoa, jotka ovat seuraavat:

  • sisältää : Jos olet asettanut korvatulle elementille nimenomaisen korkeuden ja leveyden, object-fit: sisältää; aiheuttaa sisällön (esim. kuvan) koon muuttamisen siten, että se näkyy kokonaan ja sen sisäinen kuvasuhde on säilynyt, mutta se silti mahtuu elementille asetettujen mittojen sisälle.

Object-fit: sisältää; saa kaikki kuvat säilyttämään kuvasuhteen ja sopivan samalle alueelle. Se on kokeellista, mutta varmasti tulossa pian lähelläsi olevaan selaimeen

Object-fit: sisältää; saa kaikki kuvat säilyttämään kuvasuhteen ja sopivan samalle alueelle. Se on kokeellista, mutta varmasti tulossa pian lähelläsi olevaan selaimeen
  • täyttää : Tämä asetus saa elementin sisällön laajentumaan täyttämään sille asetetut mitat, vaikka se rikkoo sen sisäisen kuvasuhteen.
  • peite : Tämän asetuksen käyttäminen säilyttää elementin sisällön sisäisen kuvasuhteen, mutta muuttaa leveyttä ja korkeutta siten, että sisältö peittää elementin kokonaan. Pienempi leveydestä ja korkeudesta tehdään sovittamaan elementti tarkalleen, ja suurempi ulottuvuus ylittää elementin.
  • ei mitään: Kun käytät arvoa ei mitään , sisältö jättää kokonaan huomioimatta elementille asetetun korkeuden tai painon ja käyttää vain korvatun elementin sisäisiä mittoja. Vaikka arvo ei mitään oli alkuperäisessä eritelmässä ja sitä tuetaan Operassa, se poistettiin sitten teknisen version myöhemmässä versiossa. Se voi kuitenkin palata tulevassa toistossa. HUOMAUTUS: Katso tarkemmin, kuinka nämä arvot vaikuttavat kuvan kuvasuhteeseen object-fit-diagram.png opetusohjelman tiedostoissa

Kuvat, joiden kuvasuhde on siirretty, näyttävät kamalilta. Naista on puristettu, jolloin hänestä on tikku, kun taas poika on venytetty, jolloin hän näyttää paksulta

Kuvat, joiden kuvasuhde on siirretty, näyttävät kamalilta. Naista on puristettu, jolloin hänestä on tikku, kun taas poika on venytetty, jolloin hän näyttää paksulta

02. Kohteen sijainti

Kohteen sijainti toimii täsmälleen samalla tavalla kuin taustan sijainti tekee taustakuville ja voi ottaa samat arvot (pikselit, emit, prosentit, avainsanat jne.). Se määrittää korvatun elementin sisällön sijainnin kyseisen elementin alueella. Esimerkiksi:

img
korkeus: 100px;
leveys: 100px;
object-fit: sisältää;
esine-sijainti: ylin 75%;
}

Oopperassa esineeseen sopiva voi myös ottaa arvon auto , joka on oletusarvo, jos ominaisuutta ei ole määritetty. Se on todella olemassa vain taaksepäin yhteensopivuuden säilyttämiseksi ja aikaisempien asetusten ohittamiseksi.

03. Säilytä suhde

Joskus niitä kutsutaan postilaatikoiksi, joskus haluat säilyttää sivun kuvien kuvasuhteen ja saada ne sopimaan samalle alueelle. Sinulla voi olla esimerkiksi sisällönhallintajärjestelmä, jonka avulla voit ladata tuotteita verkkokauppasivustolle tai kuvia kuvagalleriaan, jossa on paljon eri sisällön tekijöitä.

Kuvien postilaatikko tarkoittaa, että ne toistetaan alkuperäisellä kuvasuhteella, jolloin kohteet näyttävät jälleen uudelta todelliselta itseltään

Kuvien postilaatikko tarkoittaa, että ne toistetaan alkuperäisellä kuvasuhteella, jolloin kohteet näyttävät jälleen uudelta todelliselta itseltään

He voivat ladata kuvia suunnilleen oikeassa koossa, mutta mitat eivät aina ole tarkkoja riippumatta julkaisemistasi ohjeista! Tässä tapauksessa voit muuttaa kuvasuhdetta, jotta kaikki kuvat sopivat täsmälleen samalle alueelle, mutta se näyttää todennäköisesti kauhealta.

Toinen vaihtoehto on lähettää kuvat postilaatikkoon. Tämä näyttää paljon paremmalta, mutta se on melko monimutkainen saavuttaa asiakaspuolella nykyisellä selaintuella. Voit tietysti käyttää jonkinlaista palvelinpuolen ratkaisua kuvien esikäsittelyyn, mutta tämä on jälleen monimutkaista ja lisää enemmän yleiskustannuksia.

Voit käsitellä tätä ongelmaa todella helposti esineeseen sopiva :

img
leveys: 150px;
korkeus: 150px;
...
object-fit: sisältää;
}

Sisään esimerkkini , kaikki pikkukuvat on asetettu samalle leveydelle ja korkeudelle, mutta object- fit: sisältää; pakottaa kaikki kuvat mahtumaan samalle alueelle ja säilyttämään kuvasuhteen. Vielä parempi ratkaisu, sovelluksestasi riippuen, voi olla kuvasuhteen ylläpito, mutta muuta kuvan kokoa ja rajausta, jotta se ympäröi kokonaan elementti.

Tämä voidaan tehdä helposti korvaamalla object-fit: sisältää; kanssa esine-sovitus: kansi; ja lisäämällä ylivuoto piilotettu; sekoitukseen:

img
...
esine-sovitus: kansi;
ylivuoto piilotettu;
}

Tässä tapauksessa, esine-sovitus: kansi; saa kuvien koon kasvamaan ympäröimään elementit ja ylivuoto piilotettu; leikkaa sitten pois kuva-alue, joka vuotaa näiden elementtien ulkopuolelle (tarkista object-fit-cover-images.html näytetiedostoissa).

tiede olentojen suunnittelusta: eläinten anatomian ymmärtäminen
Täällä kuvat tehdään peittämään elementti objektikuvalla: kansi; ja leikattu koon mukaan ylivirtauksella: piilotettu;

04. Videon kuvasuhteen ohittaminen

Seuraavassa esimerkissä otamme videon, jonka kuvasuhde on rikki, ja pakotamme sen muuttamaan kuvasuhdetta ja sopimaan tiukasti määrittelemämme elementin koko. Miksi haluat tehdä tämän? Ehkä joillakin videoilla, jotka sisällön muokkaajat lähettävät CMS: ään, on rikki kuvasuhde, ja haluat esimerkiksi korjata ne kaikki lennossa.

Object-fit: täyttö; avulla voimme tehdä tämän yhdellä iskulla. Pisteen havainnollistamiseksi meidän object-fit: täytä; videoesimerkki (katso object-fit-fill-video.html koodiesimerkkeissä) käyttää paria seuraavasti:



Vaikka elementeillä on merkinnässä määritetyt leveys- ja korkeusattribuutit, ne näkyvät oletusarvoisesti postilaatikossa, koska niillä on erilainen kuvasuhde.

Oletusarvoisesti sivulle upotettu video säilyttää aina sisäisen kuvasuhteen ja muuttuu tarvittaessa postilaatikkoon

Oletusarvoisesti sivulle upotettu video säilyttää aina sisäisen kuvasuhteen ja muuttuu tarvittaessa postilaatikkoon

elementti yrittää aina säilyttää lähdetiedoston sisäisen kuvasuhteen.

Tämän korjaamiseksi olemme pakottaneet kaikki videot vastaamaan videon leveyttä ja korkeutta elementtejä soveltamalla object-fit: täytä; :

.object-fit {
...
object-fit: täytä;
}

Tämä saa kaikki videot näyttämään samalla kuvasuhteella.

kuinka luoda logo Photoshopissa

Object-fit: täyttö; ohittaa oletuskäyttäytymisen, jolloin videot ottavat elementtien asetetun leveyden ja korkeuden

Object-fit: täyttö; ohittaa oletuskäyttäytymisen, jolloin videot ottavat elementtien asetetun leveyden ja korkeuden

05. Siirtymävaikutukset

Yhdistäminen esineeseen sopiva ja objekti-sijainti CSS-siirtymien kanssa voi johtaa melko mielenkiintoisiin vaikutuksiin kuva- tai videogallerioihin:

Minä

Olen kääntänyt kuvagallerian hienoksi välilehdillä varustetuksi käyttöliittymäksi käyttämällä hieman: kohdetempua

Minä

Olen käyttänyt myös yhdistelmää siirtymiä, object-fit: ei mitään; ja ylivuoto: piilotettu; viileän laajenevan vaikutuksen saavuttamiseksi

Tässä esimerkissä (katso object-fit-none-transitions.html , opetusohjelmatiedostoissa), olen ottanut kuvagallerian, jonka näimme ensimmäisessä esimerkissä, ja:

  • Pääsi eroon esimerkin keskitetystä sijainnista ja vaihdti kuvien ja kuvatekstien sijaintia, jotta kuvalle olisi enemmän tilaa laajentua.
  • Ehdottomasti sijoitettu kaikki erilaiset sisältää kuvia ja niiden kuvatekstejä, jotta ne kaikki näkyvät samassa paikassa, ja piilottivat ne kaikki oletuksena opasiteetti: 0; .
  • Lisättiin joukko navigointilinkkejä esimerkin yläosaan siirtyäksesi eri kuva- / kuvatekstijoukkojen välillä, ja käytettiin :kohde pseudoluokan plus-siirtymät, jotta ne näkyvät sujuvasti ja katoavat linkkien selaamisen aikana (kyllä, se on tapa luoda välilehtihakemisto ilman JavaScriptiä).
  • Lisätty tabindex ja avaimet jotta linkit ja kuvat ovat käytettävissä vain näppäimistöllä.
  • Mikä tärkeintä tämän artikkelin kannalta, vaihdettu object-fit: sisältää; CSS seuraaville:

img
leveys: 150px;
korkeus: 150px;
...
object-fit: ei mitään;
ylivuoto piilotettu;
kohde-asema: 25% 50%;
siirtymä: 1s kaikki;
...
}
img: hover, img: kohdistus {
...
korkeus: 400px;
leveys: 400px;
}

Kun siirryt eri pikkukuvien yli, huomaat, että kuvia ei pienennetä elementin mukaisiksi.

Sen sijaan näytetään vain pieni osa kuvasta, ja elementti kasvaa paljastamaan suuremman osan kuvasta. Mikä antaa?

Asettamalla object-fit: ei mitään; on käsken niiden sisältöä jättää kokonaan huomiotta aiemmin asetetun leveyden ja korkeuden ja valua ulos elementtien sivuilta.

Koska kuvatiedostojen sisäinen koko on paljon suurempi kuin olen käyttänyt ylivuoto piilotettu; leikata kaikkea vuotavaa.

Siirtymää käytetään sitten suurentamaan tasaisesti elementti, kun se on hiirellä / kohdennettu, mikä paljastaa suuremman osan kuvasta.

Eikä siinä vielä kaikki. Olen myös käyttänyt kohde-asema: 25% 50%; ominaisuus siirtää kuvan sijaintia elementti hieman oikealle, mikä luo mukavan sisältöä paljastavan vaikutuksen.

06. Yhteenveto

Tämä opetusohjelma on esittänyt muutamia ideoita käytön suhteen esineeseen sopiva ja objekti-sijainti . Löydät lisää esimerkkejä Operasta esineeseen sopiva test suite -sivu . Odotamme innolla, mitä esimerkkejä luot, ja kerro meille aina, mitä mieltä olet
toteutuksemme.

Operan kehittäjäsuhdepäällikkö, Chris soittaa myös heavy metal rock-jumalien kanssa Teräksen valloitus .

Piditkö tästä? Lue nämä!