Ellenőrizze a kép képarányait a CSS3 segítségével

  • Szükséges tudás: Közepes HTML és CSS
  • Igényel: Szövegszerkesztő, Opera 11 + / WebKit éjszakai / egyéb támogató böngészők
  • Projekt idő: Gyorsabb, mint gondolnád
  • Támogatási fájl

Ez a cikk először a .net magazin 214. számában jelent meg.

A kicserélt elemek képarányának ellenőrzése, mint pl vagy , fájdalom lehet. Például azt szeretné, ha az összes kép ugyanazt a helyet foglalná el az oldalon, de ne torzítsa és ne veszítse el képarányát, ha valaki nem megfelelő méretű képfájlt használ.

A kép kissé átméretezése és betűk elhelyezése a képarány megőrzése érdekében sokkal elegánsabb megoldás, mint a kép összecsapása és kinyújtása, hogy illeszkedjen. Vagy érdemes ellenkező irányba haladnia, és kényszerítenie kell a letterboxos elemeket, például a HTML5-et s, hogy megfeleljen egy meghatározott szélességnek és magasságnak. Esetleg azt szeretné, ha az összes videó meghatározott képarányú lenne, és olyan megoldást szeretne, ahol a különböző képarányúak automatikusan helyesen jelennek meg?



Ez a probléma még kínosabb, ha olyan CMS-szel dolgozol, amelynél több tartalomszerző tölt fel videókat és képeket, különösen, ha ők végfelhasználók, és nem az alkalmazottak. Szüksége lesz egy olyan rendszerre, amely a médiát úgy dolgozza fel, hogy következetesen jelenjen meg, de ez a fajta dolog meglehetősen bonyolult: JavaScript-re van szükség a méretek menet közbeni eléréséhez és manipulálásához, sok CSS-trükkhöz vagy sok fáradságos előfeldolgozáshoz egy szerveroldali nyelvvel mint például a PHP.

A CSS3 könnyű választ kínál, amely jelenleg közel van a láthatáron. A CSS képértékek és kicserélt tartalom A modul munkavázlata meghatározza az object-fit nevű tulajdonságot, amelynek célja pontosan ilyen típusú problémák megoldása. És ez a modul tartalmaz egy kapcsolódó tulajdonságot, object-position, amellyel beállíthatja az elem belsejében lévő vízszintes és függőleges helyzetet. A példák teljes megtekintéséhez csak egy támogató böngésző szükséges, például az Opera 11 vagy az éjszakai WebKit. Mielőtt néhány példát folytatnánk, vizsgáljuk meg az új tulajdonságok alapvető szintaxisát.

01. Objektumillesztés

Jelentkezni sikeresen lehet tárgy-illeszkedés bármely kicserélt elemre. (A kicserélt elem bármely olyan elem, amelynek tartalmát és megjelenését külső erőforrás, például kép-, video- vagy SVG-fájl határozza meg.) A kód a következő:

img {
magasság: 100px;
szélesség: 100px;
object-fit: tartalmaz;
}

Vegye figyelembe, hogy a cikk kódmintáiban és példáiban a CSS-ben beállítottuk kicserélt elemeink szélességét és magasságát. Object-fit akkor is hatályba lép, amikor a dimenziókat HTML attribútumok segítségével adták meg; ez azonban nem olyan jó ötlet. Azokban a böngészőkben, amelyek nem támogatják ezt a CSS tulajdonságot, ez azt eredményezné, hogy a kicserélt elemek mindig összenyomódtak vagy kinyújtottak lennének, kivéve, ha természetesen van helyettesítő megoldás, például a média dimenzióinak PHP előfeldolgozása. Ehelyett elhagyjuk a méreteket, és hagyjuk, hogy a böngészők egyszerűen megjelenítsék azokat a belső méretük alapján. Az Ön számára legmegfelelőbb megközelítés az adott helyzetétől függ.

Object-fit négy lehetséges értéke van, amelyek a következők:

  • tartalmaz : Ha egyértelmű magasságot és szélességet állított be egy kicserélt elemre, object-fit: tartalmaz; a tartalom (pl. a kép) átméretezését eredményezi úgy, hogy teljes megjelenítésben maradjon, a belső képaránya megmaradjon, de akkor is belefér az elem számára beállított méretekbe.

Object-fit: tartalmaz; az összes kép megőrzi a képarányt és ugyanarra a területre illeszkedik. Kísérleti jellegű, de hamarosan egy közeli böngészőhöz érkezik

Object-fit: tartalmaz; az összes kép megőrzi a képarányt és ugyanarra a területre illeszkedik. Kísérleti jellegű, de hamarosan egy közeli böngészőhöz érkezik
  • tölt : Ez a beállítás azt eredményezi, hogy az elem tartalma kibővül, hogy teljesen kitöltse a számára beállított méreteket, még akkor is, ha ez megszakítja a belső képarányát.
  • borító : Ennek a beállításnak a használata megőrzi az elemtartalom belső képarányát, de megváltoztatja a szélességet és a magasságot úgy, hogy a tartalom teljesen ellepje az elemet. A szélesség és a magasság közül a kisebbet úgy alakítják, hogy pontosan illeszkedjen az elemhez, és a nagyobb méret túlcsordítja az elemet.
  • egyik sem: Amikor az értéket használja egyik sem , a tartalom teljesen figyelmen kívül hagyja az elemen beállított bármilyen magasságot vagy súlyt, és csak a kicserélt elem belső méreteit használja. Bár az érték egyik sem az eredeti specifikációban szerepelt, és az Opera támogatja, majd a specifikáció későbbi felülvizsgálata során eltávolították. Viszont a jövőben ismétlődhet. MEGJEGYZÉS: Ha szeretné tisztábban látni, hogy ezek az értékek hogyan befolyásolják a kép méretarányát, olvassa el a következőt: object-fit-diagram.png az oktató fájlokban

A képarány eltolva szörnyen néz ki. A nőt összeszorították, pálcika alakjára hasonlított, míg a fiút kinyújtották, így kövérnek tűnt

A képarány eltolva szörnyen néz ki. A nőt összeszorították, pálcika alakjára hasonlított, míg a fiút kinyújtották, így kövérnek tűnt

02. Tárgy-helyzet

Tárgy-helyzet pontosan ugyanúgy működik, mint háttér-helyzet a háttérképekhez, és ugyanazokat az értékeket veheti fel (pixel, em, százalék, kulcsszó stb.). Megadja a kicserélt elem tartalmának helyzetét az adott elem területén. Például:

img {
magasság: 100px;
szélesség: 100px;
object-fit: tartalmaz;
tárgy-pozíció: felső 75%;
}

Az operában tárgy-illeszkedés értéket is vehet auto , amely az alapértelmezett, ha a tulajdonság nincs megadva. Valójában csak a visszamenőleges kompatibilitás megőrzése és a korábbi beállítások felülbírálásának lehetővé tétele.

03. Tartalékarány

Néha letterbox-ként emlegetik, előfordul, hogy meg akarja őrizni az oldal képének képarányát, és el akarja érni, hogy ugyanazon a területen belül elférjenek. Például rendelkezhet olyan tartalomkezelő rendszerrel, amely lehetővé teszi termékek feltöltését egy e-kereskedelmi webhelyre vagy képeket egy képgalériához, sok különböző tartalomszerzővel.

A képek postaláda azt jelenti, hogy az eredeti képaránnyal reprodukálva vannak, így az alanyok ismét igazi önmaguknak néznek ki

A képek postaláda azt jelenti, hogy az eredeti képaránnyal reprodukálva vannak, így az alanyok ismét igazi önmaguknak néznek ki

Nagyjából megfelelő méretű képeket tölthetnek fel, de a méretek nem mindig pontosak, függetlenül a közzétett irányelvektől! Ebben az esetben megváltoztathatja a képarányt, hogy a képek pontosan ugyanarra a területre illeszkedjenek, de ez valószínűleg borzalmasan fog kinézni.

A másik lehetőség a képek postaláda. Ez sokkal jobban néz ki, de a böngésző jelenlegi támogatásával elég bonyolult elérni a kliens oldalon. Természetesen valamilyen szerveroldali megoldást is használhat a képek előfeldolgozásához, de ez megint bonyolult és több általános költséget jelent.

Nagyon egyszerűen kezelheti ezt a problémát tárgy-illeszkedés :

img {
szélesség: 150px;
magasság: 150px;
...
object-fit: tartalmaz;
}

Ban ben az én példám , az összes indexkép azonos szélességű és magasságú, de object- fit: tartalmaz; arra kényszeríti az összes képet, hogy ugyanazon a területen belül illeszkedjenek és megtartsák a képarányt. Még jobb megoldás lehet, az alkalmazástól függően az oldalarány fenntartása, de változtassa meg a kép méretét és kivágását, hogy teljesen beborítsa a képet elem.

Ez könnyen elvégezhető, cserével object-fit: tartalmaz; val vel object-fit: fedél; és hozzátéve túlcsordulás: rejtett; a keverékhez:

img {
...
object-fit: fedél;
túlcsordulás: rejtett;
}

Ebben az esetben, object-fit: fedél; a képek méretét növeli, hogy teljesen beborítsa a képet elemek, és túlcsordulás: rejtett; majd vágja le a kép azon részét, amely az elemeken kívül kifolyt (nézze meg object-fit-cover-images.html a mintafájlokban).

Itt a képek úgy készülnek, hogy az elemet objektumillesztéssel fedjék: fedél; és méretre vágjuk a túlcsordulás segítségével: rejtett;

04. A videó képarányának felülbírálása

Következő példánkban egy törött képaránnyal rendelkező videót készítünk, és arra kényszerítjük, hogy változtassa meg az oldalarányt, és szorosan illeszkedjen a az általunk megadott elemméret. Miért akarja ezt megtenni? Lehet, hogy a tartalomszerkesztők által a CMS-be feltöltött videók egy részének képaránya nem megfelelő, és például mindet menet közben szeretné kijavítani.

Object-fit: kitöltés; lehetővé teszi számunkra, hogy ezt egy csapásra megtegyük. A lényeg szemléltetésére a mi object-fit: kitöltés; videó példa (lásd object-fit-fill-video.html a kódpéldákban) használ párat elemek, az alábbiak szerint:



Annak ellenére, hogy a az elemek szélességi és magassági attribútumokkal rendelkeznek a jelölésben, alapértelmezés szerint betűkkel jelennek meg, mivel más a képarányuk.

Alapértelmezés szerint az oldalba ágyazott videó mindig megőrzi a belső képarányt, szükség esetén postaládává válik

Alapértelmezés szerint az oldalba ágyazott videó mindig megőrzi a belső képarányt, szükség esetén postaládává válik

A elem mindig megpróbálja fenntartani a forrásfájl belső méretarányát.

Ennek kijavítására kényszerítettünk minden videót, hogy megfeleljen a videó szélességének és magasságának elemek alkalmazásával object-fit: kitöltés; :

.objekt-fit {
...
object-fit: kitöltés;
}

Ezáltal az összes videó azonos képaránnyal jelenik meg.

Object-fit: kitöltés; felülbírálja az alapértelmezett viselkedést, és a videók arra teszik, hogy az elemek meghatározott szélességet és magasságot kapjanak

Object-fit: kitöltés; felülbírálja az alapértelmezett viselkedést, és a videók arra teszik, hogy az elemek meghatározott szélességet és magasságot kapjanak

05. Átmeneti hatások

Kombinálás tárgy-illeszkedés és tárgy-helyzet a CSS átmenetekkel elég érdekes effektusokhoz vezethet a kép- vagy videogalériák számára:

én

A képgalériát remek füles kezelőfelületté változtattam, a következők használatával: cél trükk

én

Az átmenetek kombinációját is használtam, object-fit: nincs; és túlcsordulás: rejtett; hűvös tágító hatás érdekében

Ebben a példában (lásd object-fit-none-transitions.html , az oktatóanyagok fájljaiban), elkészítettem az első példában látott képgalériát, és:

  • Megszabadult a példa középre helyezett helyzetétől, és kicserélte a képek és a feliratok helyzetét, hogy a képnek nagyobb teret nyújtson a bővítéshez.
  • Abszolút a különböző helyzetben képeket és képaláírásaikat, így mind ugyanazon a helyen jelennek meg, és alapértelmezés szerint elrejtették őket átlátszatlanság: 0; .
  • Hozzáadott egy sor navigációs linket a példa tetejére a különböző kép- és feliratkészletek közötti váltáshoz, és a :cél pseudo-class plus átmenetek, hogy azok simán megjelenjenek és eltűnjenek, amikor a linkek átkerülnek (igen, ez egy módja a füles index létrehozásának a JavaScript használata nélkül).
  • Hozzáadva tabindex és hozzáférési kulcsok hogy a linkek és képek csak billentyűzettel legyenek elérhetőek.
  • Ami a legfontosabb ebben a cikkben, kicserélte a object-fit: tartalmaz; CSS a következőkhöz:

img {
szélesség: 150px;
magasság: 150px;
...
object-fit: nincs;
túlcsordulás: rejtett;
tárgy-helyzet: 25% 50%;
átmenet: 1s all;
...
}
img: lebeg, img: fókusz {
...
magasság: 400px;
szélesség: 400px;
}

A különböző indexképek áttekintésekor észreveszi, hogy a képek nem leszűkítve, hogy illeszkedjenek az elemhez.

Ehelyett a képnek csak egy kis része látható, és az elem növekszik, hogy a kép nagyobb része felfedhető legyen. Mi ad?

A beállítással object-fit: nincs; a elemek, azt mondom a tartalmuknak, hogy teljesen figyelmen kívül hagyják a korábban beállított szélességet és magasságot, és kifolynak az elemek oldalaiból.

Mivel a képfájlok belső mérete sokkal nagyobb, mint a elemeket használtam túlcsordulás: rejtett; levágni bármit, ami kifolyik.

Ezután egy átmenetet használnak a elem, amikor az lebeg / fókuszál, ami többet mutat a képből.

És ez még nem minden. Én is használtam a tárgy-helyzet: 25% 50%; tulajdonsággal mozgathatja a kép helyzetét a elem jobbra egy kicsit, ami szép tartalomfeltáró hatást kelt.

06. Összegzés

Ez az oktatóanyag bemutatott néhány ötletet a használatáról tárgy-illeszkedés és tárgy-helyzet . További példákat találhat az Opera oldalán tárgy-illeszkedés tesztcsomagok oldala . Alig várjuk, hogy milyen példákat hozol létre, és mint mindig, tudasd velünk, mi a véleményed
megvalósításunk.

Az Opera fejlesztői kapcsolatok menedzsere, Chris heavy metal rockistennel is játszik Acél hódítása .

Tetszett ez? Olvassa el ezeket!