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 background
egenskaber 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-fit
fungerer 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å padding
ejendommen. 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 srcset
er lavet til!
Du kan kombinere dem med HTML 5- koden, der elegant nedbrydes med en
.
Til resumé
- Brug det,
background-image
hvis dit billede ikke er en del af sidens indhold. - Brug,
object-fit
hvis du ikke er ligeglad med IE. - Den polstrede containerteknik, der bruges af Netflix, fungerer overalt.
- I de fleste tilfælde skal du bare tilføje
height: auto;
din CSS. - Hvis du har brug for hurtige indlæsningstider, skal du bruge
srcset
til at indlæse mindre billeder på mobilen.