Webfejlesztőként nagy valószínűséggel találkozott a cikk két ellenségével: képekkel és határidőkkel . Előfordul, hogy bizonyos okokból a képei nem illenek az elrendezésbe, és órákig nem akarja ezt körbefogni.
Sokszor előfordult velem ez a helyzet, és tanultam a hibáimból. Nincs több fekete mágia feltörés - íme az öt kedvenc technikám a kép átméretezésének kezelésére.
az „OMG-nek SZÜKSÉGEM EZT ASAP” módon
Pénteken 17:00 van, be kell fejeznie ezt az oldalt, de a képek nem felelnek meg az elrendezésnek. Itt az ideje, hogy használd a mágikus trükköt!
.myImg { background-image: url("my-image.png"); background-size: cover; }
Ismerősen hangzik? Mindannyian egyszer megtettük már, nincs kedve megcsalni?
A background
tulajdonságok használata nagyon hasznos, csak működnek. Ne feledje azonban, hogy ezeket csak nem tartalmi képekhez, vagy a szöveg helyettesítésére, és bizonyos esetekben használja.
A jövő útja
Mi lenne, ha azt mondanám, hogy ez a fajta varázslat létezik az
elemekre is? Mondja „szia” az object-fit tulajdonságot - ami egyébként videóknál is működik!
.myImg { object-fit: cover; width: 320px; height: 180px; }
Ez van, srácok! Nézze meg, hogyan, mikor letölteni a barátságos érték cover
, mi is használható contain
.
Oké, mi a csapda?
Sajnos object-fit
az IE és a Safari régebbi verzióin nem fog működni, de van polifill.

A „Netflix” módon
Gondolhatod, hogy "kedves trükk ember, még egy mód, amely nem működik olyan régi böngészőkben, mint az IE?". Ne aggódj, ez mindenhol működik, és ez a kedvencem! Be kell csomagolnia a képet egy relatív párnázott szülővel.
Megtartjuk a képarányt az padding
ingatlan százalékos arányával . A kép teljes méretű abszolút gyermek lesz.
A kód így néz ki:
.wrapper { position: relative; padding-top: 56.25%; /* 16:9 Aspect Ratio */ } img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
- Hé ember, ez bonyolultnak tűnik.
Miután megkapta a koncepciót, a technika egyszerű és széles körben alkalmazott. A Netflix használja!

Egy kis bemutató:
Az egyszerű mód
Lehet, hogy ezt már ismeri:
img { height: auto; width: 100%; /* even more control with max-width */ max-width: 720px; }
Ha az elrendezés nem túl bonyolult, akkor a legtöbb esetben működik.
A teljesítmény módja (haladó)
Teljesítmény alatt a betöltési időket értem. A nagy hőskép tönkreteheti, és lassúvá teheti oldalát, különösen mobilon.
Tudta, hogy a modern böngészőkben az oldal szélességétől függően megváltoztathatja a kép forrását? Erre srcset
készül!
Kombinálhatja őket a HTML 5 címkével, amely kecsesen romlik egy
.
Összefoglalva
- Akkor használja,
background-image
ha a kép nem része az oldal tartalmának. - Használja,
object-fit
ha nem érdekli az IE. - A Netflix által használt párnázott tartály technika mindenütt működik.
- A legtöbb esetben csak adja hozzá
height: auto;
a CSS-t. - Ha gyors betöltési időre van szüksége, használja
srcset
a kisebb képek mobilra történő betöltéséhez.