Esineiden sovitus - CSS-temppuja

object-fitOminaisuus määrittelee, miten elementti reagoi korkeus ja leveys sen sisällön laatikko. Se on tarkoitettu kuville, videoille ja muille upotettaville mediamuodoille object-positionkiinteistön yhteydessä. Itse käytettynä object-fitvoimme rajata sisäisen kuvan antamalla meille tarkan hallinnan siitä, kuinka se squish ja venyttää laatikkonsa sisällä.

object-fit voidaan asettaa yhdellä näistä viidestä arvosta:

fill: tämä on oletusarvo, joka venyttää kuvan sopivaksi sisältöruutuun sen kuvasuhteesta riippumatta.
contain: suurentaa tai pienentää kuvan kokoa ruudun täyttämiseksi säilyttäen samalla kuvasuhteen.
cover: kuva täyttää laatikkonsa korkeuden ja leveyden säilyttäen jälleen kuvasuhteensa, mutta rajata kuvaa usein prosessin aikana.
none: kuva ei huomioi vanhemman korkeutta ja leveyttä ja säilyttää alkuperäisen koon.
scale-down: kuvassa verrataan eroa noneja containpienimmän konkreettisen objektikoon löytämiseksi.

Näin voimme asettaa kyseisen ominaisuuden:

img ( height: 120px; ) .cover ( width: 260px; object-fit: cover; )

Koska toisen kuvan kuvasuhde on erilainen kuin vasemmalla olevan alkuperäisen kuvan, se venyy sisältöruudun alueen ulkopuolelle rajaamalla kuvan ylä- ja alaosaa.

On syytä huomata, että kuva on oletusarvoisesti keskitetty sen sisältöruutuun, mutta sitä voidaan muuttaa object-positionominaisuuden avulla.

Demo

Alla olevassa esittelyssä on viisi esimerkkiä siitä, miten saatamme haluta kuvan pilaantuvan sisältölaatikkoon, joka on joskus pienempi tai suurempi kuin alkuperäinen leveys (muuta selaimen kokoa saadaksesi paremman käsityksen siitä, miten tämä voisi toimia):

Katso Robin Rendlen (@robinrendle) kynäobjektiivi CodePenistä.

Jos kuvan sisältö ei jostain syystä täytä sisältöruutua, täyttämätön tila näyttää elementin taustan, tässä tapauksessa vaaleanharmaa tausta.

Selaimen tuki

On syytä huomata, että iOS 8-9.3 ja Safari 7-9.1 object-fitominaisuus, mutta ei object-position.

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.