Evo kako dodati reaktivne dizajnne slike pomoću CSS-a
Pogledajte danas popularne web-lokacije i jedan dizajn koji ćete zasigurno vidjeti je velika pozadinska slika koja obuhvaća zaslon. Jedan od izazova s dodavanjem tih slika potječe od najbolje prakse da web stranice moraju odgovoriti na različite veličine i uređaje zaslona - pristup poznat kao odgovarajući web dizajn .
Budući da se izgled vaše web stranice mijenja i vage s različitim veličinama zaslona, tako i ove pozadinske slike moraju biti u skladu s njihovom veličinom.
Zapravo, ove "tekuće slike" jedan su od ključnih dijelova responzivnih web stranica (zajedno s tekućinom i medijskim upitima). Ta tri dijela od samog početka su bila glavni element odzivnog web dizajna, no iako je uvijek bilo lako priložiti responzivne inline slike na web mjestu (inline slike su grafike koje su kodirane kao dio HTML oznake), radeći ista sa pozadinskim slikama (koje su oblikovane na stranicu pomoću CSS pozadinskih svojstava) već dugo predstavljaju značajan izazov za mnoge web dizajnere i programere prednjeg kraja. Srećom, dodavanje entiteta "pozadinske veličine" u CSS učinio je to moguće.
U zasebnom članku razradio sam kako upotrebljavati pozadinu veličine entiteta CSS3 kako bi se protezale slike kako bi se uklopile u prozor, ali postoji još bolji i koristaniji način implementacije za ovu nekretninu. Da biste to učinili, koristit ćemo sljedeću kombinaciju entiteta i vrijednosti:
pozadina veličine: pokriti;
Oglašavanje ključne riječi govori pregledniku da skali sliku kako bi odgovarao prozoru, bez obzira na to koliko je velik ili mali prozor dobivao. Slika je skalirana tako da pokriva čitav zaslon, ali izvorni omjeri i omjer slike ostaju netaknuti, sprječavajući iskrivljavanje slike.
Slika se postavlja u prozor što je moguće veće da se cijela površina prozora pokrije. To znači da nećete imati praznih mjesta na stranici ili bilo kakvu iskrivljenost slike, ali to također znači da se neki od slika može ukloniti ovisno o omjeru zaslona i dotičnoj slici. Na primjer, rubovi slike (gornji, donji, lijevi ili desni) mogu biti odrezani na slikama, ovisno o vrijednostima koje koristite za svojstvo pozadinske pozicije. Ako pozadinu usmjerite na "gornji lijevi", bilo koji višak slike će nestati s dna i desne strane. Ako usredotočite pozadinsku sliku, višak će nestati sa svih strana, ali budući da se višak širi, utjecaj na bilo kojoj strani će biti manje služiti.
Kako koristiti pozadinsku veličinu: pokriti;
Pri izradi pozadinske slike, dobra je ideja stvoriti sliku koja je prilično velika. Dok preglednici mogu smanjiti sliku bez primjetnog utjecaja na vizualnu kvalitetu, kada preglednik skalificira sliku do veličine veće od njezinih originalnih dimenzija, vizualna će se kvaliteta degradirati, postaje mutna i pikselirana. Nedostatak toga je da vaša stranica zauzima hit performansi kada isporučujete divovske slike na sve zaslone.
Kada to učinite, pobrinite se za pravilnu pripremu tih slika za brzinu preuzimanja i dostavu weba . Na kraju, trebate pronaći sretan medij između dovoljno velike veličine i kvalitete slike i razumne veličine datoteke za brzine preuzimanja.
Jedan od uobičajenih načina upotrebe skaliranja pozadinskih slika jest kada želite da ta slika preuzme punu pozadinu stranice, bez obzira na to je li stranica široka i koja se gleda na stolnom računalu ili je mnogo manja i šalje se ručnom, mobilnom uređaji.
Prenesite svoju sliku svom web hostu i dodajte ga u svoj CSS kao pozadinsku sliku:
pozadinska slika: url (vatromet-preko-wdw.jpg);
pozadina ponoviti: ne-ponoviti;
Pozadina: centar središta;
background-attachment: fiksno;
Najprije dodajte CSS predefinirane preglednika:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
Zatim dodajte CSS svojstvo:
pozadina veličine: pokriti;
Koristeći različite slike koje odgovaraju različitim uređajima
Iako je dizajn osjetljiv za radnu površinu ili laptop iskustvo važno, razni uređaji koji mogu pristupiti webu znatno su se povećali, a veći izbor veličina zaslona dolazi s time.
Kao što je ranije spomenuto, primjerice, učitavanje vrlo velike responzivne pozadinske slike na pametnom telefonu nije učinkovito ili svjesno širina pojasa.
Saznajte kako možete upotrebljavati medijske upite da biste poslužili slike koje će odgovarati uređajima na kojima će se prikazivati i dodatno poboljšati kompatibilnost web sučelja s mobilnim uređajima.
Izvorni članak Jennfiera Krynina. Uredio Jeremy Girard 9/12/17