Ši pamoka yra savotiškas ankstesnės, kurioje svarstėme, tęsinys, dabar laikas pagilinti žinias ir pamatyti CSS savybės Vaizdai.
Vaizdo matmenys CSS
Paziuresim kas cia naujo, sukūriau img klasę kurioje nustatiau vaizdo matmenis plotis yra plotis, o aukštis yra mūsų aukštis, matmenis nurodžiau daugiau nei originalūs, kad aiškiai matytumėte kaip vaizdas pasikeis.
Aiškumo dėlei pateiksiu pavyzdį, kur bus daug teksto, ir pamatysite, kokiose vaizdo įtraukose yra šis pavyzdys naudosime maržos savybę, kuri suteiks galimybę įvertinti jos galimybes.
Aiškumo dėlei pateiksiu pavyzdį, kur bus daug teksto, ir pamatysite, kokios įtraukos iš paveikslėlio šiame pavyzdyje, mes naudosime paveikslėlį nenustatydami įtraukų, kad aiškiai matytumėte skirtumą.
Naršyklėje matome:
Šiame pavyzdyje aš padariau įtraukas iš vaizdo dėl paraštės parametro, kuris suteikė įtraukas iš visų keturių 20 pikselių kraštų. Čia galite atlikti sudėtingesnes manipuliacijas, galite nustatyti įtrauką nuo konkretaus krašto, pavyzdžiui:
- margin-top – paraštė iš viršutinės pusės
- margin-right - paraštė iš dešinės pusės
- margin-bottom - paraštė iš apačios
- margin-left - paraštė iš kairės pusės
Atitinkamai čia galite viską sureguliuoti tiksliau arba nustatyti įtrauką tik iš vienos ar dviejų pusių neliesdami kitų.
Naršyklėje:
Aplink vaizdą nustatome rėmelį, naudodamiesi kraštinės parametru, pirmiausia nustatome rėmelio plotį naudodami border-width, nustatome jį pikseliais, tada rėmelio stilių, tai yra jo išvaizdos kraštinės stilių. galite pasirinkti kelias vertes:
Ir paskutinis parametras, kurį koreguosime, yra kraštinės spalva, kurią nustato parametras border-color.
Naršyklėje matome:
Kaip suprantate, foną kūno žymai priskyrėme žymų parinkiklio dėka, nes jis užima visą dokumentą, todėl galime priskirti ir kitoms žymoms. Fono parametras mums padarė foną paveikslėliu, kurio adresą rašome skliausteliuose. Taip pat galite manipuliuoti fonu, pavyzdžiui:
fonas: url(proba.png) pakartoti-x;
Fonas kartosis tik išilgai X ašies, ty horizontaliai vienoje eilutėje.
fonas: url(proba.png) pakartoti-y;
Fonas kartosis tik išilgai Y ašies, ty vertikaliai vienoje eilutėje.
fonas: url(proba.png) no-repeat;
Fonas nesikartos, bet bus rodomas tik vienas vaizdas.
fono dydis: 500 pikselių 200 pikselių;
tai papildomas parametras A, kuris nustato vaizdo fono dydį, plotį ir aukštį.
Vaizdo skaidrumas naudojant CSS
Naršyklėje matome:
Ši savybė atsirado atsiradus CSS3 ir iš tikrųjų buvo gana plačiai naudojama. Įdiegtas naudojant neskaidrumo parametrą, nustato vaizdo skaidrumą, reikšmes nuo 0 iki 1 ir antrąjį filtro parametrą: alpha(Opacity=50); daro tą patį interneto naršyklė Explorier, nes senesnės versijos nepalaiko neskaidrumo parametro, reikšmės nuo 0 iki 100. Pavyzdyje specialiai padariau du vaizdus, kad aiškiai matytumėte skirtumą.
Taip baigiama CSS vaizdo savybių pamoka. Tikiuosi, kad ši pamoka jums buvo naudinga ir įkvėpė toliau mokytis kalbos bei įgyti naujų žinių.
Paskelbimo data: 2014-04-22
Vaizdai yra beveik bet kurios svetainės komponentai, todėl jų dydį keisti būtina. Yra 2 būdai, kaip pakeisti vaizdo dydį: grafikos redaktorius arba programiškai html kodas ant css.
Jei į css kodas html nenustatykite vaizdo dydžio, tada jo aukštis ir plotis svetainėje bus tokie patys pikseliais kaip ir šaltinio failą. Tai yra, galite pakeisti vaizdo dydį be css ir html, naudodami tik grafinį redaktorių, ir jis automatiškai pasikeis svetainėje, jei nenurodysite jo dydžio. Tačiau pasitaiko atvejų, kai reikia programiškai pakeisti vaizdo dydį css į html.
1. Paveikslėlio keitimas grafiniame redaktoriuje
Vaizdo dydį galite pakeisti bet kuriame grafiniame redaktoriuje (Photoshop, gimp, xnview) ir jis automatiškai pasikeis svetainėje pagal pradinį dydį.
Metodo privalumai:
Paveikslėlis įkeliamas greičiau, nes nereikia atsisiųsti papildomų duomenų (pikselių), kurie vėliau bus programiškai suglaudinami.
Minusai:
Grafiniai redaktoriai prastai suglaudina vaizdus, kurių plotis ir aukštis mažesnis nei 200 pikselių.
Kai tik įmanoma ir tinkama, pabandykite pakeisti jo dydį grafikos rengyklėje, kad nuotraukos būtų įkeliamos greičiau nei keičiant jų dydį programiškai. Greičio skirtumas gali būti dešimtis kartų.
2. Vaizdo keitimas CSS kode svetainėje
Privalumai:
Greičiau ir patogiau nustatyti dydį. Šis metodas vaizdo mažinimas dažniausiai naudojamas patogumui. Pavyzdžiui, kai viena nuotrauka gali būti įvairių dydžių, dažnai patogiau keisti tos pačios reikšmes programiškai, nei įkelti visus vieno vaizdo, redaguoto grafiniu redaktoriumi, formatus.
Kokybiškai suspaustos mažos nuotraukos, kurių aukštis arba plotis mažesnis nei 200 pikselių, skirtingai nuo grafinių redaktorių. Jei norite, kad vaizdo dydis svetainėje būtų mažesnis nei 200 pikselių, geriau, kad originalus dydis būtų 30–50 % (260–300 piks.) didesnis, kad išsaugotumėte gera kokybė kai mažėja.
Tuo pačiu svetainės įkėlimo greičio skirtumas nebus jaučiamas, nes maži vaizdai užima labai mažai vietos ir padidinus jų dydį 30%, pokyčių nepastebėsite. Tačiau atkreipkite dėmesį į kokybės skirtumą.
Minusai:
Programiškai suspaustos nuotraukos įkeliamos ilgiau, nes dydis keičiamas tik atsisiuntus originalią versiją. Todėl, jei vaizdo dydis yra didesnis nei 200 pikselių pločio ar aukščio, geriau jį suspausti grafikos rengyklėje, kad svetainė veiktų greičiau.
Kaip pakeisti html vaizdo dydį naudojant css
Norėdami pakeisti vaizdo dydį html css naudojamos savybės plotis (plotis) ir aukštis (aukštis) stiliaus atributo viduje. Galite rašyti tik plotį arba aukštį , o likusi nenurodyta reikšmė automatiškai pasikeis išlaikant vaizdo formato santykį. Pavyzdžiui, nurodant tik vaizdo plotį naudojant plotį, jo aukštis pasikeis automatiškai, išlaikant formato santykį. Ir atvirkščiai, nurodant tik aukštį (aukštį), automatiškai pasikeis ir jo plotis, išsaugant vaizdo kraštinių santykį.
Kodo pavyzdys nenurodant vaizdo matmenų
Rezultatas naršyklėje
Puslapio kodas
Kodo pavyzdys su vaizdo dydžio keitimu .css
Rezultatas naršyklėje
Puslapio kodas
style="width:150px; ">
Abiejuose anksčiau pateiktuose pavyzdžiuose naudojamas tas pats vaizdas, kurio dydis yra 300 x 184 pikselių (plotis ir aukštis). 1 pavyzdyje vaizdas naršyklėje buvo rodomas be pakeitimų, kai pradinis dydis buvo 300 x 184 pikselių, nes plotis ir aukštis nebuvo nurodyti css. O 2 pavyzdyje vaizdas naršyklėje buvo rodomas 2 kartus sumažintas, nes plotis buvo 150 pikselių, aukštis atitinkamai automatiškai pasikeitė į 92 px. Kaip matote, aukščio savybė gali būti visai nenurodyta, nes ji automatiškai keičiasi proporcingai pločiui.
Jei pateikiate abi parinktis: plotis (plotis), aukštis (aukštis) ir jie neatitiks proporcijų, tada paveikslėlis bus būtent tokio dydžio, bet suspaustos arba ištemptos formos, priklausomai nuo reikšmių.
Kodėl nepageidautina didinti nuotraukų?
Svarbu: padidinus vaizdo dydį, prarandama jo kokybė. Keičiant bet kokiu būdu, svarbu nustatyti mažesnes reikšmes nei pirminiame paveikslėlyje, ty tik sumažinti.
Jei pikselių dydį nustatysite didesnį nei pradinis vaizdas, kokybė pablogės. O kokybės praradimas bus aiškiai matomas, nes kompiuteris negali pridėti naujų pikselių, gali tik padidinti esamus. Kuo didesnis vaizdo padidinimas nuo pradinės reikšmės, tuo prastesnė jo kokybė ir aiškiau matomi kvadratiniai pikseliai.
Paveikslėlio dydžio keitimas naudojant HTML žymą pateikiami atributai plotis (plotis) ir aukštis (aukštis). Pikseliai naudojami kaip reikšmė, o argumentai turi atitikti fizinius vaizdo matmenis. Pavyzdžiui, pav. 10.6 rodomas vaizdas, kurio matmenys yra 100 x 111 pikselių.
Ryžiai. 10.6. originalaus dydžio nuotrauka
Atitinkamai, HTML kodas, skirtas šiai figūrai įdėti, parodytas 10.4 pavyzdyje.
10.4 pavyzdys. Brėžinio matmenys
Jei vaizdo matmenys nurodyti aiškiai, tai naršyklė juos naudoja, kad įkeliant dokumentą būtų rodoma tuščia paveikslėlį atitinkanti sritis (10.7 pav.). Priešingu atveju naršyklė laukia, kol vaizdas bus visiškai įkeltas, prieš keisdama vaizdo plotį ir aukštį (10.8 pav.). Tokiu atveju tekstas gali būti performatuojamas, nes iš pradžių nuotraukos dydis nežinomas ir automatiškai nustatomas mažas.
Ryžiai. 10.7. Vaizdo dydis nenurodytas ir jis dar neįkeltas
Ryžiai. 10.8. Vaizdas įkeltas, tekstas suformatuotas iš naujo
Vaizdo plotis ir aukštis gali būti keičiami tiek aukštyn, tiek žemyn. Tačiau tai neturi jokios įtakos nuotraukos atsisiuntimo greičiui, nes failo dydis nesikeičia. Todėl sumažinkite vaizdą atsargiai, nes. tai gali sukelti skaitytojų painiavą, kodėl toks mažas piešinys įkeliamas taip ilgai. Tačiau padidinus dydį, gaunamas priešingas efektas - vaizdo dydis yra didelis, tačiau failas įkeliamas greičiau, palyginti su to paties dydžio vaizdu.
Ant pav. 10.9 rodo tą patį vaizdą, kaip parodyta pav. 10,6, bet padvigubėjo plotis ir aukštis.
Ryžiai. 10.9. Vaizdas padidintas naršyklėje
Tokio piešinio kodas išliks beveik nepakitęs ir parodytas 10.5 pavyzdyje.
10.5 pavyzdys. Paveikslėlio dydžio keitimas
Toks dydžio keitimas vadinamas resampling, o naršyklės algoritmas savo galimybėmis yra prastesnis nei grafinių redaktorių. Todėl tokiu būdu vaizdą reikia didinti tik ypatingais atvejais, antraip vaizdo kokybė per daug pablogėja. Geriau naudoti kokią nors grafinę programą. Išimtis yra brėžiniai, kuriuose yra stačiakampių sričių. Ant pav. 10.10 paveiksle parodytas šablono failas, kuris užima 54 baitus ir kurio pradinis dydis yra 8 x 8 pikseliai, padidintas iki 150 pikselių.
Ryžiai. 10.10. Padidintas vaizdas
Naršyklės naudoja du perrinkimo algoritmus – dvikubinį (suteikia lygius kraštus ir lygią spalvų gamą) ir artimiausius taškus (išsaugo originalų spalvų rinkinį ir aštrius kraštus). Naujausiose naršyklių versijose naudojamas bikubinis algoritmas, o senesnėse naršyklėse, atvirkščiai, naudojamas artimiausio taško algoritmas.
Instrukcija
Pirmiausia pabandykite surasti paveikslėlį naudodamiesi paieškos varikliais. Įveskite užklausą, tada pasirinkite paieškos nustatymų skirtuką. Pavyzdžiui, „Google“ turi mygtuką „Paieškos įrankiai“, o „Yandex“ turi piktogramą su slankikliais. Po to, kai reikia pasirinkti elementą "Dydis" ir nurodyti tikslias reikšmes. Arba, pavyzdžiui, jei reikia geros raiškos nuotraukos, pasirinkite „Didelė“.
Jei norimo dydžio paveikslėlio nėra, tuomet jį prie rėmelio galima priderinti patiems. Yra būdų. Pirma, pirmiausia sukuriate norimo dydžio dokumentą, o tada pakeisite paveikslėlį. Antrasis yra priešingas - atidarykite paveikslėlį ir pakeiskite dydį. Iš esmės nėra jokio skirtumo: viskas priklauso nuo jūsų pageidavimų ir tikslų. Pavyzdžiai bus svarstomi „Adobe Photoshop“, tačiau galite naudoti kitus grafinius redaktorius.
Pirmas būdas. Spustelėkite „Failas“ - „Sukurti ...“ arba klavišų kombinaciją Ctrl + N. Prieš jus pasirodys langas su nustatymais. Ten nurodykite plotį, aukštį ir reikiamus spalvų skyros parametrus. Tada atidarykite jums patinkantį vaizdą naršyklėje, dešiniuoju pelės mygtuku spustelėkite ir pasirinkite „Kopijuoti vaizdą“. Tada grįžkite į programą ir paspauskite kombinaciją Ctrl + V.
Paveikslėlis pasirodys grafikos rengyklės lange. Tada spustelėkite "Redaguoti" - "Laisva transformacija" arba kombinaciją Ctrl + T. Atsiras pagrindiniai taškai, kurių pagalba galėsite pritaikyti vaizdą prie darbinio lango dydžio. Kai tik gausite norimą rezultatą (beje, galite peržengti darbo srities ribas), spustelėkite „Failas“ - „Išsaugoti kaip ...“ arba klavišų kombinaciją Ctrl + S.
Antras būdas. Pirmiausia turite eiti į kompiuterį, tada spustelėkite „Failas“ - „Atidaryti ...“ (arba Ctrl + O derinys) ir pasirinkite norimą vaizdą. Tada pasirinkite "Vaizdas" - "Vaizdo dydis ..." arba paspauskite Alt + Ctrl + I. Panaikinkite žymėjimą nuo „Išlaikyti formato santykį“ ir pasirinkite norimą dydį. Tada paspauskite mygtuką OK.
Nuotraukos dydis bus pakeistas pagal nurodytą dydį centimetrais (milimetrais, coliais), taip pat nurodytą dydį DPI, pagal popieriaus spausdinimo standartus. Matmenys cm, mm ir coliais gali būti nurodyti tūkstantųjų dalių tikslumu, pavyzdžiui, vietoj 15x10 formato galite nustatyti 15,201x10,203 cm.
Stalas su standartinių nuotraukų dydžiais vertikalioje (portretinėje) padėtyje:
| Nuotraukos formatas centimetrais (cm) | Dydis milimetrais (mm) | Dydis pikseliais (spausdinimui 300 dpi) |
Krašto santykis (kraštovaizdžio orientacija) |
| 3x4 (po pjovimo rankiniu būdu) | 30x40 | 354x472 | 4:3 (1.33) |
| 3,5x4,5 (po pjovimo rankiniu būdu) | 35x45 | 413x531 | 4:3 (1.33) |
| 9x13 | 89x127 | 1063x1535 | 10:7 (1.43) |
| 10x15 | 102x152 | 1181x1772 | 3:2 (1.5) |
| 13x18 | 127x178 | 1535x2126 | 7:5 (1.4) |
| 15x20(≈A5) | 152x203 | 1772x2362 | 4:3 (1.33) |
| 15x21 | 152x216 | 1772x2480 | 4:3 (1.33) |
| 18x24 | 178x240 | 2126x2835 | 19:14 (1.36) |
| 20x25 | 203x254 | 2362x2953 | 5:4 (1.25) |
| 20x30(≈A4) | 203х305 | 2362x3543 | 3:2 (1.5) |
| 30x40 | 305x406 | 3543x4724 | 4:3 (1.33) |
| 30x45 | 305x457 | 3543x5315 | 3:2 (1.5) |
Standartinis popieriaus lapo dydis A4 formatu- 21x29,7 cm arba 2480x3508 pikseliai esant 300 dpi. Kitų lapų formatų matmenis galima pamatyti Vikipedijos puslapyje, tačiau tik nepamirškite, kad ten matmenys nurodyti milimetrais ir coliais, t.y. šio puslapio nustatymuose turite pasirinkti tinkamą reikšmę.
Jei jums reikia pakeisti nuotraukos dydį neatsižvelgiant į DPI (taškų colyje), tai yra tik atsižvelgiant į nurodyto formato proporcijas, tam reikia nustatyti parametrą „Dydis DPI“ į „0“. nustatymus.
Originalus vaizdas niekaip nesikeičia. Jums bus suteikta kita apdorota nuotrauka.