Időtakarékos CSS technikák az érzékeny képek létrehozásához

Programozás

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 backgroundtulajdonsá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-fitaz 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 paddingingatlan 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 srcsetkészül!

Kombinálhatja őket a HTML 5 címkével, amely kecsesen romlik egy .

Összefoglalva

  1. Akkor használja, background-image ha a kép nem része az oldal tartalmának.
  2. Használja, object-fitha nem érdekli az IE.
  3. A Netflix által használt párnázott tartály technika mindenütt működik.
  4. A legtöbb esetben csak adja hozzá height: auto;a CSS-t.
  5. Ha gyors betöltési időre van szüksége, használja srcseta kisebb képek mobilra történő betöltéséhez.