Táto lekcia je akýmsi pokračovaním predchádzajúcej, v ktorej sme uvažovali, teraz je čas prehĺbiť svoje vedomosti a vidieť CSS vlastnosti Snímky.
Rozmery obrázka v CSS
Pozrime sa, čo je tu nové, vytvoril som img triedu, v ktorej som nastavil rozmery obrázka, šírka je šírka a výška je naša výška, rozmery som označil viac ako pôvodné, aby ste jasne videli, ako obrázok zmení sa.
Pre názornosť uvediem príklad, kde bude veľa textu a uvidíte, aké odrážky z obrázka sú v tento príklad použijeme vlastnosť margin, ktorá vám dá možnosť zhodnotiť jej schopnosti.
Pre názornosť uvediem príklad, kde bude veľa textu a uvidíte, aké sú v tomto príklade zarážky z obrázka, použijeme obrázok bez nastavenia zarážok, aby ste jasne videli rozdiel.
V prehliadači vidíme nasledovné:
V tomto príklade som urobil odsadenia z obrázku vďaka parametru margin, ktorý nám dal odsadenie od všetkých štyroch okrajov 20 pixelov. Tu môžete robiť zložitejšiu manipuláciu, môžete nastaviť odsadenie od konkrétneho okraja, napríklad:
- margin-top - okraj z hornej strany
- margin-right - okraj z pravej strany
- margin-bottom - okraj zo spodnej strany
- margin-left - okraj z ľavej strany
Podľa toho tu môžete všetko jemnejšie upraviť alebo nastaviť odsadenie len z jednej alebo dvoch strán bez toho, aby ste sa dotkli ostatných.
V prehliadači:
Nastavíme rám okolo obrázku, vďaka parametru border najprv nastavíme šírku rámu pomocou border-width, nastavíme ho v pixeloch, potom štýl rámu, teda jeho vzhľad border-style, tam máte na výber niekoľko hodnôt:
A posledným parametrom, ktorý upravíme, je farba orámovania, ktorú nastavuje parameter border-color.
V prehliadači vidíme:
Ako ste pochopili, pozadie sme priradili k tagu body vďaka selektoru tagov, keďže zaberá celý dokument, môžeme ho priradiť aj k iným tagom. Parameter pozadia nám urobil z pozadia obrázok, adresu na ktorú píšeme v zátvorke. Môžete tiež manipulovať s pozadím, napríklad:
pozadie: url(proba.png) repeat-x;
Pozadie sa bude opakovať iba pozdĺž osi X, teda vodorovne v jednom riadku.
pozadie: url(proba.png) repeat-y;
Pozadie sa bude opakovať iba pozdĺž osi Y, teda vertikálne v jednej línii.
pozadie: url(proba.png) no-repeat;
Pozadie sa nebude opakovať, ale zobrazí sa iba jeden obrázok.
background-size: 500px 200px;
to dodatočný parameter A, ktorým sa nastavuje veľkosť, šírka a výška pozadia obrázka.
Priehľadnosť obrázkov pomocou CSS
V prehliadači vidíme nasledovné:
Táto vlastnosť prišla s príchodom CSS3 a skutočne získala pomerne rozsiahle využitie. Implementované pomocou parametra opacity nastavuje priehľadnosť obrázku, hodnoty od 0 do 1 a druhý parameter filtra: alpha(Opacity=50); robí to isté pre internetový prehliadač Prieskumník preto, že staršie verzie nepodporujú parameter opacity, hodnoty od 0 do 100. V príklade som špeciálne vytvoril dva obrázky, aby ste jasne videli rozdiel.
Týmto sa lekcia CSS Image Properties končí, dúfam, že táto lekcia bola pre vás užitočná a inšpirovala vás k ďalšiemu štúdiu jazyka a získaniu nových vedomostí.
Dátum publikácie: 2014-04-22
Obrázky sú súčasťou takmer každého webu, takže zmena veľkosti je nevyhnutná. Existujú 2 spôsoby, ako zmeniť veľkosť obrázka: grafický editor alebo programovo html kód na css.
Ak v css kód na html nenastavujte veľkosť obrázku, potom bude jeho výška a šírka na stránke rovnaká v pixeloch ako v zdrojový súbor. To znamená, že môžete zmeniť veľkosť obrázka bez css a html, iba pomocou grafického editora, a ak nezadáte jeho veľkosť, automaticky sa zmení na stránke. Sú ale prípady, kedy je potrebné programovo zmeniť veľkosť obrázka v css na html.
1. Zmena obrázku v grafickom editore
Veľkosť obrázka môžete zmeniť v akomkoľvek grafickom editore (photoshop, gimp, xnview) a na stránke sa automaticky zmení v súlade s pôvodnou veľkosťou.
Výhody metódy:
Obrázok sa načítava rýchlejšie, pretože nie je potrebné sťahovať ďalšie dáta (pixely), ktoré sa potom skomprimujú programovo.
mínusy:
Grafické editory zle komprimujú obrázky menšie ako 200 pixelov na šírku a výšku.
Vždy, keď je to možné a vhodné, skúste zmeniť jeho veľkosť v grafickom editore tak, aby sa obrázky načítali rýchlejšie ako pri programovej zmene veľkosti. Rozdiel v rýchlosti môže byť desaťnásobný.
2. Zmena obrázku v css kóde na stránke
Výhody:
Rýchlejšie a pohodlnejšie nastavenie veľkosti. Táto metóda zmenšenie obrazu sa zvyčajne používa pre pohodlie. Napríklad, keď jeden obrázok môže mať veľa rôznych veľkostí, je často pohodlnejšie zmeniť hodnoty toho istého pomocou programovania, ako nahrať všetky formáty jedného obrázka upraveného v grafickom editore.
Kvalitatívne komprimované malé obrázky s výškou alebo šírkou menšou ako 200 pixelov, na rozdiel od grafických editorov. Ak chcete, aby veľkosť obrázka na stránke bola menšia ako 200 pixelov, je lepšie, aby bola pôvodná veľkosť o 30 – 50 % (260 – 300 pixelov) väčšia, aby ste ušetrili dobrá kvalita pri znižovaní.
Zároveň nebude cítiť rozdiel v rýchlosti načítania stránok, pretože malé obrázky zaberajú veľmi málo miesta a ak ich veľkosť zväčšíte o 30 %, nezaznamenáte žiadne zmeny. Všimnite si však rozdiel v kvalite.
mínusy:
Programovo komprimované obrázky sa načítavajú dlhšie, pretože k zmene veľkosti dôjde až po stiahnutí pôvodnej verzie. Ak je teda veľkosť obrázka väčšia ako 200 pixelov na šírku alebo výšku, potom je lepšie ho skomprimovať v grafickom editore, aby stránka fungovala rýchlejšie.
ako zmeniť veľkosť html obrázka pomocou css
Ak chcete zmeniť veľkosť obrázka v html css vlastnosti sa používajú šírka (šírka) a výška (výška) vnútri atribútu štýlu. Môžete napísať iba šírku alebo výšku a zostávajúca nešpecifikovaná hodnota sa automaticky zmení, pričom sa zachová pomer strán obrázka. Napríklad zadaním iba šírky obrázka pomocou šírky sa jeho výška automaticky zmení, pričom sa zachová pomer strán. A naopak, pri zadaní iba výšky (výšky) sa automaticky zmení aj jej šírka so zachovaním pomeru strán obrazu.
Príklad kódu bez zadania rozmerov obrázka
Výsledok v prehliadači
Kód stránky
Príklad kódu so zmenou veľkosti obrázka v .css
Výsledok v prehliadači
Kód stránky
style="width:150px; ">
Oba vyššie uvedené príklady používajú rovnaký obrázok s veľkosťou 300 x 184 pixelov (šírka a výška). V 1 príklade sa obrázok zobrazil v prehliadači bez zmien s pôvodnou veľkosťou 300x184px, keďže šírka a výška neboli v css zadané. A v druhom príklade bol obrázok zobrazený v prehliadači zmenšený 2-krát, keďže šírka bola 150px, výška sa podľa toho automaticky zmenila na 92px. Ako vidíte, vlastnosť výšky nemusí byť vôbec špecifikovaná, pretože sa automaticky mení v pomere k šírke.
Ak uvediete obe možnosti: šírka (šírka), výška (výška) a nebudú zodpovedať proporciám, potom bude mať obrázok presne takú veľkosť, ale v komprimovanej alebo roztiahnutej forme, v závislosti od hodnôt.
Prečo je nežiaduce zväčšovať obrázky
Dôležité: Zväčšenie veľkosti obrázka je sprevádzané stratou kvality. Pri akejkoľvek zmene je dôležité nastaviť hodnoty nižšie ako na pôvodnom obrázku, teda iba znížiť.
Ak nastavíte veľkosť v pixeloch väčšiu ako pôvodný obrázok, kvalita sa zhorší. A strata kvality bude jasne viditeľná, pretože počítač nemôže pridať nové pixely, môže iba zväčšiť veľkosť existujúcich. Čím väčšie je zväčšenie obrazu oproti pôvodnej hodnote, tým je jeho kvalita horšia a štvorcové pixely sú zreteľnejšie viditeľné.
Ak chcete zmeniť veľkosť obrázka pomocou HTML pre značku sú poskytnuté atribúty šírka (šírka) a výška (výška). Ako hodnota sa používajú pixely a argumenty sa musia zhodovať s fyzickými rozmermi obrázka. Napríklad na obr. 10.6 ukazuje obrázok, ktorý má rozmery 100x111 pixelov.
Ryža. 10.6. obrázok v pôvodnej veľkosti
V súlade s tým je HTML kód na umiestnenie tohto obrázku znázornený v príklade 10.4.
Príklad 10.4. Rozmery výkresu
Ak sú rozmery obrázka špecifikované explicitne, prehliadač ich použije na zobrazenie prázdnej oblasti zodpovedajúcej obrázku počas načítavania dokumentu (obr. 10.7). V opačnom prípade prehliadač počká, kým sa obrázok úplne načíta, a až potom zmení šírku a výšku obrázka (obrázok 10.8). V tomto prípade môže dôjsť k preformátovaniu textu, pretože spočiatku nie je známa veľkosť obrázka a automaticky sa nastaví na malú.
Ryža. 10.7. Veľkosť obrázka nie je určená a ešte sa nenačítal
Ryža. 10.8. Obrázok bol odovzdaný, text preformátovaný
Šírka a výška obrazu sa dá meniť hore aj dole. To však žiadnym spôsobom neovplyvňuje rýchlosť sťahovania obrázka, pretože veľkosť súboru zostáva nezmenená. Zmenšujte preto obrázok opatrne, pretože. to môže spôsobiť zmätok medzi čitateľmi, prečo sa taká malá kresba načítava tak dlho. Zväčšenie veľkosti však vedie k opačnému efektu – veľkosť obrázka je veľká, ale súbor sa načítava rýchlejšie v porovnaní s obrázkom rovnakej veľkosti.
Na obr. 10.9 zobrazuje rovnaký obrázok ako na obr. 10,6, ale zdvojnásobená na šírku a výšku.
Ryža. 10.9. Pohľad na obrázok zväčšený v prehliadači
Kód pre takýto výkres zostane takmer nezmenený a je znázornený v príklade 10.5.
Príklad 10.5. Zmena veľkosti obrázka
Takáto zmena veľkosti sa nazýva prevzorkovanie a algoritmus prehliadača je vo svojich schopnostiach horší ako grafické editory. Preto je potrebné zväčšovať obraz týmto spôsobom len v špeciálnych prípadoch, inak sa kvalita obrazu príliš zhoršuje. Je lepšie použiť nejaký grafický program. Výnimkou sú výkresy obsahujúce obdĺžnikové oblasti. Na obr. Obrázok 10.10 zobrazuje súbor so vzorom, ktorý má 54 bajtov a má pôvodnú veľkosť 8 x 8 pixelov v mierke až 150 pixelov.
Ryža. 10.10. Zväčšený obrázok
Prehliadače používajú na prevzorkovanie dva algoritmy – bikubický (poskytuje hladké okraje a hladký tonálny rozsah farieb) a najbližšie body (zachováva pôvodnú sadu farieb a ostré hrany). Najnovšie verzie prehliadačov používajú bikubický algoritmus, zatiaľ čo staršie prehliadače, naopak, používajú algoritmus najbližšieho bodu.
Inštrukcia
Najprv sa pokúste nájsť obrázok pomocou vyhľadávačov. Zadajte dopyt a potom vyberte kartu nastavení vyhľadávania. Napríklad Google má tlačidlo „Nástroje vyhľadávania“, zatiaľ čo Yandex má ikonu s posuvníkmi. Potom musíte vybrať položku "Veľkosť" a zadať presné hodnoty. Alebo napríklad, ak potrebujete fotografiu s dobrým rozlíšením, zvoľte "Veľké".
Ak nie je k dispozícii žiadny obrázok s požadovanou veľkosťou, môžete ho sami prispôsobiť rámu. Existujú spôsoby. Prvým je, že najprv vytvoríte dokument s požadovanou veľkosťou a potom zmeníte obrázok. Druhá je opačná - otvorte obrázok a zmeňte veľkosť. V podstate nie je žiadny rozdiel: všetko závisí od vašich preferencií a cieľov. Príklady budú zohľadnené v programe Adobe Photoshop, ale môžete použiť aj iné grafické editory.
Prvý spôsob. Kliknite na "Súbor" - "Vytvoriť ..." alebo na kombináciu klávesov Ctrl + N. Pred vami sa zobrazí okno s nastaveniami. Tam zadajte šírku, výšku a požadované parametre farebného rozlíšenia. Potom v prehliadači otvorte obrázok, ktorý sa vám páči, kliknite pravým tlačidlom myši a vyberte možnosť „Kopírovať obrázok“. Potom sa vráťte do programu a stlačte kombináciu Ctrl + V.
Obrázok sa zobrazí v okne grafického editora. Potom kliknite na „Úpravy“ - „Voľná transformácia“ alebo na kombináciu Ctrl + T. Zobrazia sa kľúčové body, pomocou ktorých môžete obrázok prispôsobiť veľkosti pracovného okna. Hneď ako získate požadovaný výsledok (mimochodom, môžete ísť za hranice pracovnej oblasti), kliknite na „Súbor“ - „Uložiť ako ...“ alebo na kombináciu klávesov Ctrl + S.
Druhý spôsob. Najprv musíte prejsť do počítača, potom kliknúť na „Súbor“ - „Otvoriť ...“ (alebo na kombináciu Ctrl + O) a vybrať požadovaný obrázok. Potom vyberte „Obrázok“ - „Veľkosť obrázka ...“ alebo stlačte Alt + Ctrl + I. Zrušte začiarknutie políčka "Zachovať pomer strán" a vyberte požadovanú veľkosť. Potom stlačte tlačidlo OK.
Veľkosť fotografie sa zmení podľa zadanej veľkosti v centimetroch (milimetroch, palcoch), ako aj zadanej veľkosti v DPI, podľa štandardov tlače na papier. Rozmery v cm, mm a palcoch je možné zadať s presnosťou na tisíciny, napríklad namiesto formátu 15x10 môžete nastaviť 15,201x10,203 cm.
Tabuľka so štandardnými veľkosťami fotografií vo vertikálnej polohe (na výšku):
| Formát fotografie v centimetroch (cm) | Veľkosť v milimetroch (mm) | Veľkosť v pixeloch (pre tlač 300 dpi) |
Pomer strán (v orientácii na šírku) |
| 3x4 (po ručnom rezaní) | 30x40 | 354 x 472 | 4:3 (1.33) |
| 3,5 x 4,5 (po ručnom rezaní) | 35x45 | 413 x 531 | 4:3 (1.33) |
| 9x13 | 89 x 127 | 1063 x 1535 | 10:7 (1.43) |
| 10x15 | 102 x 152 | 1181 x 1772 | 3:2 (1.5) |
| 13x18 | 127 x 178 | 1535 x 2126 | 7:5 (1.4) |
| 15x20(≈A5) | 152 x 203 | 1772 x 2362 | 4:3 (1.33) |
| 15x21 | 152 x 216 | 1772 x 2480 | 4:3 (1.33) |
| 18x24 | 178 x 240 | 2126 x 2835 | 19:14 (1.36) |
| 20x25 | 203 x 254 | 2362 x 2953 | 5:4 (1.25) |
| 20x30(≈A4) | 203 x 305 | 2362 x 3543 | 3:2 (1.5) |
| 30x40 | 305 x 406 | 3543 x 4724 | 4:3 (1.33) |
| 30x45 | 305 x 457 | 3543 x 5315 | 3:2 (1.5) |
Štandardná veľkosť listu papiera Formát A4- 21 x 29,7 cm alebo 2 480 x 3 508 pixelov pri 300 dpi. Rozmery ostatných formátov listov si môžete pozrieť na stránke Wikipedia, len nezabudnite, že rozmery sú tam uvedené v milimetroch a palcoch, t.j. v nastaveniach na tejto stránke je potrebné vybrať príslušnú hodnotu.
Ak potrebujete zmeniť veľkosť fotografie bez zohľadnenia DPI (bodov na palec), to znamená len rešpektovania proporcií zadaného formátu, musíte na to nastaviť parameter "Veľkosť v DPI" na "0" v nastavenie.
Pôvodný obrázok sa nijako nemení. Dostanete ďalší spracovaný obrázok.