Članak u kojem ćemo se upoznati s klasama Bootstrap 3 i 4 okvira za dizajn slika.
Šta se desilo responsive image?Responzivna slika je slika koja se prilagođava širini elementa u koji je postavljena.
One. ispunjava sljedeće uslove:
- ako je širina slike manja od širine elementa u kojem se nalazi, tada se dimenzije ove slike ne mijenjaju.
- ako je širina slike veća od širine elementa u kojem se nalazi, tada je širina slike jednaka dostupnoj širini roditeljskog elementa. U ovom slučaju, visina ove slike se smanjuje proporcionalno njenoj širini.
Omogućavanje prilagodljivosti slike je urađeno:
- u Bootstrapu 3 dodavanjem klase .img-responsive u oznaku img
- u Bootstrapu 4 dodavanjem klase .img-fluid u oznaku img.
Primjenjuje ove klase na sliku CSS svojstva max-width:100% i height:auto.
Ako želite da sve slike koje se nalaze na stranici ili u određenom bloku odjednom učinite adaptivnim, onda da biste to učinili morate koristiti jedno od sljedećih CSS pravila:
/* Metoda 1 - Učinite sve slike responzivnim. U ovom slučaju, podaci o slici će biti uneseni kao elementi inline-bloka (inline-block) */ img ( display: inline-block; visina: auto; maksimalna širina: 100%; ) /* Metoda 2 - Napravite sve slike adaptivni. U ovom slučaju, podaci o slici će biti uneseni kao blok elementi (blok) */ img ( prikaz: blok; visina: auto; maksimalna širina: 100%; ) /* Metoda 3 - Napravite sve slike koje se nalaze u elementu sa id-om =" prilagodljiv glavni". U ovom slučaju, podaci o slici će biti uneseni kao blok elementi (blok) */ #main img ( display: block; visina: auto; max-width: 100%; )
Ovo pravilo se mora dodati u CSS datoteku, koja mora biti uključena nakon datoteke bootstrap.css.
Kako promijeniti oblik slikeU Bootstrap 3 i 4, možete koristiti odgovarajuće klase da napravite sliku sa zaobljenim uglovima (Bootstrap 3 - img zaobljeni, Bootstrap 4 - zaobljeni), zatvorite je u okvir (img-thumbnail) ili joj date oblik kruga ( Bootstrap 3 - img-krug , Bootstrap 4 - zaobljen-krug).
Možete promijeniti položaj slike u Bootstrapu 3 koristeći pomoćne klase float (.pull-left i .pull-right), .center-block klasu i klase za poravnanje teksta (.text-left , .text-center i .text-desno) .
Bootstrap 4 koristi sljedeće klase za poravnavanje elemenata: float-left, float-right, mx-auto i text-align klase (.text-left, .text-center i .text-right).
pažnja:
Klase .pull-left , .pull-right i .center-block mogu se koristiti za poravnavanje slika koje se ponašaju kao blok ili inline-block elementi. Nakon njihove primjene, slike postaju blokovi.
Klase .text-left, .text-center i .text-right mogu se koristiti samo za preuređivanje slika koje se ponašaju kao elementi inline-bloka.
Na primjer, da biste pozicionirali sliku na lijevo, morate joj dodati .pull-left klasu:
Na primjer, da biste pozicionirali sliku s desne strane, morate joj dodati .pull-right klasu:
Na primjer, da biste centrirali sliku, morate joj dodati .center-block klasu ili je smjestiti u div kontejner sa .text-center klasom:
Razmotrimo nekoliko opcija za dizajn slika na web mjestu.
Opcija 1: Uokvirite sliku koristeći okvir koji predstavlja prozor pretraživača u Mac OS-u (sa tri kontrole na lijevoj strani).
/* CSS */ .srcshot ( pozicija: relativna; pozadina: #fff; granica: 2px solid #9e9e9e; margin-top: 20px; margin-bottom: 20px; ) .srcshot-header ( display: flex; align-items: centar; visina: 20px; pozadina: #9e9e9e; border-bottom: 2px solid #9e9e9e; ) .srcshot-header::after ( content: "screenshot"; font-family: SFMono-Regular, Menlo, Monaco, Consolas, " Liberation Mono", "Courier New", monospace; veličina fonta: 12px; boja: #fff; margin-left: auto; margin-right: 5px; ) .srcshot-header-btn ( širina: 10px; visina: 10px; background: #fff; margin-left: 5px; border-radius: 5px; ) .srcshot-wrapper ( margin: 5px; ) @media (min-width: 768px) (.srcshot-wrapper ( margin: 15px; ) ). srcshot-wrapper-item (prikaz: blok; maksimalna širina: 100%; visina: auto; margina: 0 auto; ) 
Opcija 2. Okvir slike koji izgleda kao prozor pretraživača u Windows-u (sa tri kontrole na desnoj strani).
/* CSS */ .srcshot ( pozicija: relativna; pozadina: #fff; granica: 2px solid #9e9e9e; margin-top: 20px; margin-bottom: 20px; ) .srcshot-header ( display: flex; align-items: centar; visina: 20px; pozadina: #9e9e9e; border-bottom: 2px solid #9e9e9e; ) .srcshot-header::before ( content: "screenshot"; font-family: SFMono-Regular, Menlo, Monaco, Consolas, " Liberation Mono", "Courier New", monospace; veličina fonta: 12px; boja: #fff; margin-left: 5px; margin-right: auto; ) .srcshot-header-btn ( širina: 18px; visina: 10px; background: #fff; margin-right: 5px; ) .srcshot-wrapper ( margin: 5px; ) @media (min-width: 768px) (.srcshot-wrapper ( margin: 15px; ) ) .srcshot-wrapper-item ( prikaz: blok; maksimalna širina: 100%; visina: automatski; margina: 0 auto; )
Opcija 3. Slika sa okvirom i objašnjenjem “screenshot”.
/* CSS */ .srcshot ( pozicija: relativna; text-align: centar; margin-top: 20px; margin-bottom: 20px; ) .srcshot::before ( sadržaj: "screenshot"; pozicija: apsolutna; vrh: 0 ; lijevo: 50%; transform: translateX(-50%); padding: 6px 6px 4px; boja: #616161; pozadina: #fff; veličina fonta: 12px; ) .srcshot-dark::before ( boja: #fff ; pozadina: #616161; ) .srcshot-item ( display: inline-block; granica: 5px solid #fff; box-shadow: 0 0 10px #9e9e9e; border-bottom-left-radius: 4px; border-bottom-right -radijus: 4px; maksimalna širina: 100%; visina: auto; ) .srcshot-item-dark ( granica: 5px čvrsta #616161; ) 
Opcija 4. Slika sa bijelim okvirom i sjenom.
/* CSS */ .img ( display: block; margin-top: 20px; margin-bottom: 20px; text-align: center; ) .img-item ( display: inline-block; border: 5px solid #fff; box -shadow: 0 0 10px #9e9e9e; max-width: 100%; visina: auto; ) 
U ovom kratkom vodiču ćemo pogledati najjednostavnije načine za kreiranje responzivnih slika pomoću CSS-a. Postoji dosta različitih rješenja za prilagođavanje slika, sva se razlikuju po složenosti i stepenu podrške pretraživača. Primjer složenog načina implementacije responzivnih slika je korištenje atributa srcset, koji zahtijeva više slika, više oznaka, a također ovisi o podršci pretraživača.
Moderne specifikacije nam omogućavaju da slike koje se koriste na web stranicama učinimo fleksibilnim i ispravno prikazanim na ekranima različitih korisničkih uređaja, za to je dovoljno koristiti samo nekoliko svojstava iz CSS klipa.
Počnimo s osvrtom na osnovni primjer gdje je potrebno da pojedinačne slike koje se koriste u objavama ili drugim pojedinačnim blokovima budu potpuno prilagodljive. Na primjer, imamo kontejner kojem smo dali osnovnu širinu širine: 96%; i postavite maksimalnu širinu na max-width: 960px; , u ovom bloku trebamo prikazati adaptivnu sliku. Za ovaj element unutar kontejnera postavljamo širinu na 100%, tako da će njegova širina uvijek biti jednaka širini kontejnera, bez obzira na veličinu okvira za prikaz. Visina se, shodno tome, pretvara u automatski način rada, kao rezultat toga, slika će se proporcionalno promijeniti.
CSS: div.container ( širina: 96%; maksimalna širina: 960px; margina: 0 auto; /* središte glavnog kontejnera */ ) img ( širina: 100%; /* širina slike */ visina: auto; /* Visina Slike */ ) Zapiši to element će reagirati čak i ako su fiksne vrijednosti za HTML atribute širine i visine specificirane direktno u oznaci.
Zdravo svima! Shvatili smo šta je prilagodljivi izgled, mreža i kako fontove učiniti prilagodljivim. Pogledajmo sada kako prilagoditi slike.
Ovo je zapravo vrlo jednostavna tema i neće nam oduzeti mnogo vremena.
Da bi vaše slike bile prilagodljive, trebate im dodati svojstvo max-width=100%.
Img (
maks. širina: 100%;
}
Sve! Sada se naša slika neće širiti dalje od roditeljskog kontejnera i prilagođavat će se ovisno o rezoluciji ekrana.
Osim za slike, ovu tehniku možete koristiti i za video zapise i druge medijske datoteke.
Img, embed, objekat, video (
maks. širina: 100%;
}
Sve bi bilo u redu, ali ovo radi samo u IE7+. Ako trebate podržati IE6, onda ovo svojstvo radi tamo u sljedećem unosu:
Img (
širina: 100%;
}
One. Umjesto maksimalne širine, upišite širinu.
Drugi problem na koji možete naići je loše skaliranje slike u Windowsu. Da, tačno u sistemu, a ne u pretraživaču. Ako pažljivo pogledate, možete vidjeti neke artefakte.
Rješavanje ovog problema za IE je jednostavno.
Logo (
pozadina: nema;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/path/to/logo.png",sizingMethod="scale");
}
One. Svojstvo filtera nam pomaže da riješimo ovaj problem.
Problem adaptivnih slika je prilično relevantan, pa ću početi s malo razmišljanja i metoda implementacije, a zatim ću istaknuti opciju koja, po mom mišljenju, najviše odgovara.
Dakle, prije otprilike godinu dana pomislio sam da sve što trebate učiniti je da koristite sljedeći kod:
Omot img( širina: 100%; )
I zaista, u nekim slučajevima to može biti ograničeno. Ovaj trik odlično funkcioniše kada se prozor pretraživača smanji. Ali što ako širina spremnika u kojem se nalazi slika postane veća od rezolucije slike? U redu. Slika se proteže po širini kontejnera, ali kvaliteta ostavlja mnogo da se poželi. Ali šta ako vam je potrebna podrška za rezoluciju od 2048 x 1536px?
Ako ne koristite svg i radi se o rasterskoj slici, onda prvo što vam padne na pamet je da snimite sliku koja bi odgovarala maksimalnoj rezoluciji landing page, a kada se promijeni veličina prozora pretraživača, bit će komprimirana u normalnom kvalitetu.
I tada nastaje problem performansi. Glupo je da pametni telefon učitava tako velike slike koje izgledaju dobro u retina rezoluciji. Na kraju krajeva, brzina mobilnih mreža nije tako visoka kao brzina računara, a neki korisnici možda neće čekati da se odredišna stranica učita na njihovom pametnom telefonu. Rezultat je izgubljeni klijent.
Možete pokušati definirati nekoliko divova sa slikama, a zatim, koristeći medijske upite, sakriti nepotrebne i prikazati samo sliku koja odgovara trenutnoj rezoluciji.
Čini se da je problem riješen. Ali činjenica je da pretraživači, kako bi ubrzali prikaz stranice, unaprijed učitavaju slike koje su upisane u html prije nego što css počne da se obrađuje. Možda se nisam sasvim korektno izrazio (ispravite me), ali ako izvedete ovaj trik, onda će sve slike i dalje biti učitane, bez obzira na to što je napisano u css-u. To znači da smo samo pogoršali situaciju mobilnih uređaja. Sada će morati da učitaju ne jednu, već nekoliko slika.
To možete provjeriti tako što ćete otvoriti alate za programere i pogledati karticu "Mreža".
Općenito, još uvijek postoji mnogo problema koji se mogu pojaviti pri kreiranju adaptivnih slika. A nakupilo se i dosta rješenja. Sve zavisi od konkretne situacije.
U html 5 pojavila se oznaka slike koja vam omogućava da riješite većinu problema i kreirana je posebno za kreiranje adaptivnog (responzivnog) dizajna. Njegov dizajn podsjeća na video i audio oznake. Suština rada je da je nekoliko slika specificirano unutar oznake slike za određene rezolucije ekrana. To izgleda otprilike ovako:
Posebnost je što se umjesto src koristi srcset i koristi se nešto slično medijskim upitima. Mala slika se učitava u rezoluciji manjoj od 319px. Prosječna slika rezolucije od 320px do 480px, itd.
Općenito, kada koristite nove oznake, preporučujem da pogledate ovu stranicu i provjerite trenutno stanje stvari.
Kao što vidite situaciju na ovog trenutka ostavlja mnogo da se poželi. Ne postoji podrška na IOS uređajima, na Macbookovima i IE (iako ih korisnicima IE nije žao, oni moraju patiti). Mislim da nismo svi spremni da izgubimo toliko korisnika. Ne, netačno sam izrazio. Nemojte ga izgubiti, jer će se naša glavna slika učitati i prikazati ispravno. Ali ipak, ne bih volio da izgubim kupce s Apple tehnologijom zbog dugog vremena učitavanja stranica, jer je to najvjerovatnije solventna publika
Da biste sada iskoristili prednosti ove oznake, trebate koristiti malu skriptu (između oznaka head) picturefill.js .
Sada bi svi uređaji trebali podržavati ovu strukturu za raspored adaptivnih slika. Istina, nisam ga testirao na Macu (još ga nemam).
Za razliku od gore opisane metode, sada se učitava samo jedna slika, a ne tri, kao što je to bilo prije. 
Svaki web dizajner zna da je kreiranje responzivnog izgleda možda jedan od najvažnijih složeni zadaci sa kojima se može susresti u svom radu. Problem nije samo u tome što je potrebno voditi računa o specifičnostima veličine ekrana razni uređaji i odaberite raspored blokova na stranici na način da web projekt izgleda lijepo i na ekranu računara i na mobilnom telefonu, ali činjenica je da mnogi moderni uređaji imaju takozvane “retina” monitore sa povećanom gustinom piksela , koji imaju posebne zahtjeve za web izgled.
Činjenica je da ekrani "retina" pružaju slike sa povećanom jasnoćom zbog dvostruke denzifikacije tačaka piksela koji čine slike. Ali ovo poboljšanje ima i svoje nedostatke, a najvažnija od njih je da je sada potrebno dodatno odabrati ilustracije visoke definicije posebno za retina monitore. Postoji razna rješenja kako bi se postigla visoka jasnoća slike i na konvencionalnim i na retina uređajima. Pogledajmo neke primjere.
Tradicionalna metoda koja koristi samo CSS svojstvaČesto se u web dizajnu koristi ista slika određene veličine, za koju se postavlja maksimalna veličina prikaza na ekranu, koja je dva ili više puta manja od originalne veličine.
Jednostavan primjer: recimo da želite da se vaš logotip veličine 250 x 250 px pravilno prikazuje na ekranu sa dvostrukom gustinom piksela. U tom slučaju morate kreirati drugu sliku logotipa koja je dvostruko veća od željene veličine na ekranu, tj. 500 x 500 px.
Sada trebamo riješiti glavni problem - kako osigurati da prikaz slike uvijek ostane isti, odnosno da je njegova veličina uvijek 250 x 250 px?
Možda je neko odmah došao na ideju da napiše jednostavan CSS kod, otprilike ovako:
Img (maks. širina: 250px; )
Čudno, ova metoda neće raditi. Morate ograničiti veličinu spremnika koji sadrži sliku, a ne samu sliku. Trebalo bi izgledati otprilike ovako:
Div img (maks. širina: 250px; )
Koji su nedostaci ove metode?
Ako koristite ovu metodu rasporedi za male slike, kao što su logotipi ili ikone, najvjerovatnije nećete naići na probleme. Međutim, ova metoda nije prikladna za velike ilustracije. Zar ne volite da preuzimate ogromne slike posebno za retina uređaje koji čak neće moći da prikažu sve detalje vaše ilustracije?!
Razmislite o posjetiocima vaše web stranice. Šta reći nekome ko pokušava da čita na brzinu? važna informacija sa vašeg web resursa, povezivanje putem USB modema, koji nije baš dobar u hvatanju komunikacijskog signala? Naravno, možete izgubiti određeni dio publike ako ne razmišljate o tome kako pravilno kreirati responzivni dizajn za svoju web stranicu.
Inače, ako želite malo promijeniti dizajn stranice ovisno o brzini konekcije na strani klijenta, možete koristiti poseban uslužni program Foresight.js od Adama Bradleya, koji mjeri brzinu učitavanja slike od 50K.
Još jedan nedostatak metode je da se omjer širine i visine ekrana običnog monitora i ekrana mobilnog telefona razlikuje. Stoga će pozadinska slika koja je razvučena horizontalno izgledati prilično čudno kada se smanji kako bi odgovarala širini ekrana na mobilnom telefonu, ostavljajući puno praznog prostora na dnu. U slučaju da mobilni telefon Bilo bi bolje da web master ima priliku da poveća sliku, istakne njen značajan dio i postavi ovaj dio slike kao pozadinu umjesto cijele slike.
Postoji li alternativa?Ali postoji veliki broj alternative koje vam omogućavaju da prilagodite slike rezoluciji ekrana bez preopterećenja komunikacijskog kanala i bez usporavanja rada uređaja posjetitelja stranice.
Većina ovih metoda se oslanja na kombinaciju skripti koje se izvode i na strani klijenta i na strani servera. Prvi od njih, napisan u javascript jezik, saznajte sve o svojstvima uređaja koji koristi posjetitelj stranice i brzini internetske veze; ova potonja može učitati sliku traženog kvaliteta ovisno o primljenim informacijama.
Moderni programeri stvorili su prilično veliki broj skripti koje obavljaju slične funkcije. Primjer je posebna Jquery skripta HiSRC, koju su razvili Marc Grabanski i Christopher Schmitt, koja vam omogućava preuzimanje jedne od tri opcije za svaku sliku, ovisno o vrsti uređaja korisnika i brzini internetske veze.
IN opšti pogled HTML oznaka za ovu skriptu izgleda ovako:
U atributu src morate navesti putanju do datoteke sa slikom koja se prva učitava, obično sama slika Niska kvaliteta. Nakon što se stranica učita, skripta će provjeriti brzinu internetske veze i vrstu ekrana uređaja sa kojeg je posjetitelj pristupio stranici. Ako brzina interneta dozvoljava i uređaj podržava “retina” slike, slika koja se nalazi na adresi navedenoj u atributu data-2x će se učitati, ako uređaj podržava obične slike, slika će se učitati na adresi u data- 1x atribut, i ako ne dozvoljava brzinu interneta, neće se vršiti nikakve promjene. Posebna klasa dodana slici će reći skripti da je potrebno izvršiti određene transformacije na tom DOM elementu.
Sama skripta je povezana dodavanjem koda:
$(document).ready(function())( $(".hisrc").hisrc(); ));
Sve je vrlo jednostavno i ne zahtijeva nikakve dodatne muke. Sve što trebate učiniti je odabrati tri različite slike za učitavanje u različitim situacijama i vaša će stranica biti spremna za rad. Možete kreirati zasebnu verziju slike s promijenjenim proporcijama posebno za mobilne uređaje.
Metoda također ima niz nedostataka. Prvo, morate dodatno uključiti Jquery biblioteku. Drugo, metoda zahtijeva specifičnu HTML oznaku, koja možda nije prikladna za sve web mastere, budući da se u nekim slučajevima način na koji se -tag prikazuje ne može promijeniti.
Zanimljiv način kreiranja prilagodljivih slika nudi servis Sencha.io Src (u vrijeme pisanja ovog članka još uvijek radi), koji uopće ne zahtijeva nikakva podešavanja na serveru. Usluga radi na bazi proxyja.
Samo umetnite prefiks http://src.sencha.io/ ispred adrese vaše slike u atribut src, a Sencha.io Src će se pobrinuti za ostalo. Ovo besplatna usluga, koji vam omogućava da riješite većinu problema modernog web dizajnera.
Nedostaci usluge uključuju činjenicu da se njenim korištenjem postajete ovisni o funkcionisanju resursa treće strane; svaki kvar u njegovom radu utječe na vašu web stranicu, pa NE PREPORUČUJEM da je koristite, a ne samo nju, ali bilo koje treće strane u općim uslugama.
ZaključakKao što vidite, oni zaista postoje alternativnim načinima priprema adaptivnih slika za web stranice. U ovom članku nisu navedene sve metode dostupne modernim korisnicima. Svakim danom raste broj usluga i dodataka koji vam omogućavaju kontrolu rezolucije slike ovisno o svojstvima uređaja na kojima se web stranica pregledava. Web majstori nemaju izbora nego da testiraju svakog od njih i odaberu jednu ili drugu metodu ovisno o hitnim zadacima s kojima se suočavaju.