CSS Vodič za responzivne slike: Kako učiniti slike responzivnim pomoću CSS-a

Većina današnjih web stranica reagira. A ako trebate centrirati i poravnati sliku na toj web lokaciji, morate naučiti kako slike učiniti fluidnima ili reagirati s CSS-om.

Objavio sam tutorial video koji objašnjava kako napraviti prilagodljivu web stranicu korak po korak prije nekoliko tjedana. U videu smo napravili sliku koja reagira. Ali u ovom postu želio bih dati malo više detalja o tome kako učiniti slike responzivnima.

Također ćete naučiti neke od općih problema koji se mogu pojaviti kada pokušavate učiniti slike prilagodljivima - a ja ću pokušati objasniti kako ih riješiti.

Kako učiniti slike responzivnim pomoću CSS-a

Trebam li koristiti relativne ili apsolutne jedinice?

Stvoriti fluidnu sliku ili reagirati na nju zapravo je prilično jednostavno. Kada sliku prenesete na svoje web mjesto, ona ima zadanu širinu i visinu. Možete ih oboje promijeniti s CSS-om.

Da biste sliku učinili reaktivnom, morate joj dati novu vrijednost svojstvu širine. Tada će se visina slike automatski prilagoditi.

Važno je znati da uvijek trebate koristiti relativne jedinice za svojstvo širine poput postotka, a ne apsolutne poput piksela.

img { width: 500px; }

Na primjer, ako definirate fiksnu širinu od 500 piksela, vaša slika neće reagirati - jer je jedinica apsolutna.

img { width: 50%; }

Zato biste umjesto toga trebali dodijeliti relativnu jedinicu poput 50%. Ovaj pristup učinit će vaše slike fluidnima i moći će sami promijeniti veličinu bez obzira na veličinu zaslona.

Trebam li koristiti medijske upite?

Jedno od pitanja koja mi najviše postavljaju jest trebate li koristiti medijske upite ili ne.

Medijski upit je još jedna važna značajka CSS-a koja pomaže web mjestu da reagira. Ovdje neću ulaziti u dodatne detalje, ali kasnije možete pročitati moj drugi post da biste naučili kako detaljnije koristiti medijske upite.

Odgovor na to pitanje je: "ovisi". Ako želite da vaša slika ima različite veličine s jednog uređaja na drugi, morat ćete upotrijebiti medijske upite. Inače nećete.

Sada za ovaj primjer, vaša slika ima 50% širine za bilo koju vrstu zaslona. Ali kada ga želite napraviti u punoj veličini za mobilne uređaje, trebate potražiti pomoć iz medijskih upita:

@media only screen and (max-width: 480px) { img { width: 100%; } }

Dakle, na temelju pravila za medijske upite, bilo koji uređaj manji od 480 piksela zauzet će punu veličinu širine zaslona.

U nastavku možete pogledati i video verziju ovog posta:

Zašto svojstvo max-width nije sjajno?

Drugi način na koji programeri mogu napraviti responzivne slike je svojstvo max-width. Međutim, ovo nije uvijek najbolja metoda za korištenje, jer možda neće raditi za sve vrste zaslona ili uređaje.

Prvo što moramo razumjeti prije nego što nastavimo s primjerom je što točno radi svojstvo max-width.

Svojstvo max-width postavlja maksimalnu širinu za element, što ne dopušta da širina tog elementa bude veća od njegove vrijednosti max-width (ali može biti i manja).

Na primjer, ako slika ima zadanu širinu od 500 piksela i ako veličina zaslona ima samo 360 piksela, tada nećete moći vidjeti cjelovitu sliku jer nema dovoljno prostora:

img { max-width: 100%; width: 500px; // assume this is the default size }

Stoga možete definirati svojstvo max-width za sliku i postaviti je na 100%, što smanjuje sliku od 500px na prostor od 360px. Tako ćete moći vidjeti kompletnu sliku na zaslonu manje veličine.

Dobra je stvar što će, budući da koristite relativnu jedinicu, slika biti fluidna u bilo kojem uređaju manjem od 500 piksela.

Nažalost, veličina zaslona dobit će nešto veću od 500 piksela, ali slika neće jer ima zadanu širinu od 500 piksela. Ovaj pristup će slomiti odziv slike.

Da biste to popravili, trebate ponovno koristiti svojstvo width, što svojstvo max-width čini beskorisnim.

Što je s visinama?

Još jedan uobičajeni problem na koji možete naići povezan je sa svojstvom height. Uobičajeno, visina slike automatski se sama mijenja, tako da ne morate dodijeliti svojstvo visine svojim slikama (jer na neki način lomi sliku).

Ali u nekim ćete slučajevima možda morati raditi sa slikama koje moraju imati fiksnu visinu. Dakle, kada slici dodijelite fiksnu visinu, ona će i dalje reagirati, ali neće izgledati dobro.

img { width: 100%; height: 300px; }

Srećom, postoji još jedno svojstvo koje CSS nudi za rješavanje ovog problema ...

Rješenje: Svojstvo prikladno objektu

Da biste imali veću kontrolu nad svojim slikama, CSS nudi još jedno svojstvo koje se naziva objektno uklapanje. Upotrijebimo svojstvo object-fit i dodijelimo vrijednost koja će vašu sliku učiniti boljom:

img { width: 100%; height: 300px; object-fit: cover; object-position: bottom; }

Ako je potrebno, možete upotrijebiti i svojstvo objekta-položaja (uz prilagodbu objekta) za fokusiranje na određeni dio slike. Mnogi ljudi nisu svjesni svojstva prilagođenosti objektu, ali može biti korisno riješiti ove vrste problema.

Nadam se da vam je ovaj post pomogao da razumijete i riješite probleme s responzivnim slikama. Ako želite saznati više o web razvoju, slobodno posjetite moj Youtube kanal.

Hvala na čitanju!