Tidsbesparende CSS-teknikker til at skabe responsive billeder

Som webudvikler er der stor sandsynlighed for, at du har stødt på de to fjender i denne artikel: billeder og deadlines . Nogle gange passer dine billeder af nogle grunde ikke til layoutet, og du vil ikke pakke dit hoved rundt i timevis.

Denne situation er sket for mig mange gange, og jeg har lært af mine fejl. Ikke flere sorte magiske hacks - her er mine fem favoritteknikker til håndtering af billedstørrelse.

"OMG, jeg har brug for denne ASAP" måde

Klokken er 17:00 fredag, du skal afslutte denne side, men billederne passer ikke til layoutet. Det er tid til at bruge dit magiske trick!

.myImg { background-image: url("my-image.png"); background-size: cover; }

Det lyder velkendt? Vi har alle gjort det en gang, har det ikke lyst til at snyde for dig?

Brug af backgroundegenskaber er meget nyttigt, de fungerer bare. Husk alligevel, at du kun skal bruge dem til billeder, der ikke er indhold, eller som erstatning for tekst og i nogle særlige tilfælde.

Vejen fra fremtiden

Hvad hvis jeg fortalte dig, at denne slags magi også findes for elementer? Sig "hej" til egenskaben object-fit - som forresten også fungerer til videoer!

.myImg { object-fit: cover; width: 320px; height: 180px; }

Det var alt folkens! Se, hvordan når vi henter den venlige værdi cover, vi også kan bruge contain.

Okay, hvad er fælden?

Desværre object-fitfungerer det ikke på IE og ældre versioner af Safari, men der er en polyfyldning.

Den "Netflix" måde

Du kan måske tænke "dejligt trick mand, en måde mere, der ikke fungerer i gamle browsere som IE?". Bare rolig, denne fungerer overalt, og den er min favorit! Du bliver nødt til at pakke dit billede sammen med en relativ polstret forælder.

Vi holder billedforholdet med en procentdel på paddingejendommen. Dit billede vil være et absolut barn i fuld størrelse.

Koden ser sådan ud:

.wrapper { position: relative; padding-top: 56.25%; /* 16:9 Aspect Ratio */ } img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }

"Hej mand, det ser kompliceret ud."

Når du først har fået konceptet, er teknikken enkel og udbredt. Netflix bruger det!

En lille demo:

Den enkle måde

Du kender måske allerede denne:

img { height: auto; width: 100%; /* even more control with max-width */ max-width: 720px; }

Hvis dit layout ikke er for kompliceret, fungerer det i de fleste tilfælde.

Performance-måde (avanceret)

Ved præstation mener jeg belastningstider. Et stort heltebillede kan ødelægge det og få din side til at føles langsom, især på mobil.

Vidste du, at du i moderne browsere kan ændre en billedkilde afhængigt af din sidebredde? Det er det, der srcseter lavet til!

Du kan kombinere dem med HTML 5- koden, der elegant nedbrydes med en .

Til resumé

  1. Brug det, background-image hvis dit billede ikke er en del af sidens indhold.
  2. Brug, object-fithvis du ikke er ligeglad med IE.
  3. Den polstrede containerteknik, der bruges af Netflix, fungerer overalt.
  4. I de fleste tilfælde skal du bare tilføje height: auto;din CSS.
  5. Hvis du har brug for hurtige indlæsningstider, skal du bruge srcsettil at indlæse mindre billeder på mobilen.