CSS tehnike uštede vremena za stvaranje responzivnih slika

Programiranje

Kao web programer, velika je vjerojatnost da ste naišli na dva neprijatelja ovog članka: slike i rokove . Ponekad se iz nekih razloga vaše slike ne uklapaju u raspored i ne želite se satima zamatati oko toga.

Ova situacija dogodila mi se mnogo puta i učio sam na svojim greškama. Nema više hakiranja crne magije - evo mojih pet omiljenih tehnika za rukovanje veličinom slike.

na način "OMG TREBA MI OVO KOLIKO prije"

U petak je 17:00, morate završiti ovu stranicu, ali slike neće odgovarati rasporedu. Vrijeme je da iskoristite svoj čarobni trik!

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

Zvuči poznato? Svi smo to već jednom učinili, ne osjećate li se kao da vas varam?

Korištenje backgroundsvojstava vrlo je korisno, oni jednostavno rade. Ipak, imajte na umu da biste ih trebali koristiti samo za slike bez sadržaja ili kao zamjenu za tekst, a u nekim određenim slučajevima.

Put iz budućnosti

Što ako vam kažem da ova vrsta magije postoji i za elemente? Pozdravi svojstvo objekta prilagođenog - koje, inače, također radi i za videozapise!

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

To je sve narode! Pogledajte kako kada dohvatimo prijateljsku vrijednost cover, također možemo koristiti contain.

Ok, u čemu je zamka?

Nažalost object-fit, neće raditi na IE i starijim verzijama Safarija, ali postoji polifil.

Način "Netflix"

Možda mislite "lijep trik, još jedan način koji ne funkcionira u starim preglednicima poput IE-a?". Ne brinite, ovaj radi svugdje i meni je najdraži! Morat ćete omotati svoju sliku s relativno podstavljenim roditeljem.

Zadržat ćemo omjer slike s postotkom na paddingimanju. Vaša će slika biti apsolutno dijete pune veličine.

Kôd izgleda ovako:

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

"Hej čovječe, izgleda komplicirano."

Jednom kada dobijete koncept, tehnika je jednostavna i široko se koristi. Netflix to koristi!

Mali demo:

Jednostavan način

Možda već znate ovaj:

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

Ako vaš raspored nije previše kompliciran, u većini slučajeva uspije.

Način izvedbe (napredni)

Pod izvedbom mislim na vremena učitavanja. Velika slika heroja može je pokvariti i učiniti da se vaša stranica osjeća usporeno, posebno na mobilnim uređajima.

Jeste li znali da u modernim preglednicima možete promijeniti izvor slike ovisno o širini stranice? Za to srcsetje stvoreno!

Možete ih kombinirati s oznakom HTML 5 , koja se graciozno razgrađuje s .

Ukratko

  1. Koristite background-image ako vaša slika nije dio sadržaja stranice.
  2. Koristite object-fitako vam nije stalo do IE.
  3. Tehnika podstavljenih kontejnera, koju koristi Netflix, djeluje svugdje.
  4. U većini slučajeva samo dodajte height: auto;CSS.
  5. Ako trebate brzo vrijeme učitavanja, upotrijebite srcsetza učitavanje manjih slika na mobitel.