Tato lekce je jakýmsi pokračováním předchozí, ve které jsme zvažovali, nyní je čas prohloubit své znalosti a vidět Vlastnosti CSS Snímky.
Rozměry obrázku v CSS
Podívejme se, co je zde nového, vytvořil jsem img třídu, ve které jsem nastavil rozměry obrázku, šířka je šířka a výška je naše výška, rozměry jsem uvedl více než původní, abyste jasně viděli, jak obrázek změní se.
Pro názornost uvedu příklad, kde bude hodně textu, a uvidíte, jaké odrážky z obrázku jsou v tento příklad použijeme vlastnost margin, která vám dá možnost vyhodnotit její schopnosti.
Pro názornost uvedu příklad, kde bude hodně textu a uvidíte, jaké jsou v tomto příkladu odsazení z obrázku, použijeme obrázek bez nastavení odsazení, abyste jasně viděli rozdíl.
V prohlížeči vidíme následující:
V tomto příkladu jsem udělal odsazení z obrázku díky parametru margin, který nám dal odsazení od všech čtyř okrajů po 20 pixelech. Zde můžete provádět složitější manipulaci, můžete nastavit odsazení od konkrétní hrany, například:
- margin-top - okraj z horní strany
- margin-right - okraj z pravé strany
- margin-bottom - okraj ze spodní strany
- margin-left - okraj z levé strany
Podle toho zde můžete vše upravit jemněji nebo nastavit odsazení pouze z jedné nebo dvou stran, aniž byste se dotkli ostatních.
V prohlížeči:
Nastavíme rámeček kolem obrázku, díky parametru border nejprve nastavíme šířku rámečku pomocí border-width, nastavíme v pixelech, poté styl rámečku, tedy jeho vzhled border-style, tam máte na výběr několik hodnot:
A posledním parametrem, který budeme upravovat, je barva ohraničení, kterou nastavuje parametr border-color.
V prohlížeči vidíme:
Jak jste pochopili, přiřadili jsme pozadí tagu body díky selektoru tagů, protože zabírá celý dokument, můžeme přiřadit i další tagy. Parametr pozadí nám z pozadí udělal obrázek, adresu na kterou píšeme v závorce. Můžete také manipulovat s pozadím, například:
pozadí: url(proba.png) repeat-x;
Pozadí se bude opakovat pouze podél osy X, tedy vodorovně v jedné linii.
pozadí: url(proba.png) repeat-y;
Pozadí se bude opakovat pouze podél osy Y, tedy svisle v jedné linii.
pozadí: url(proba.png) no-repeat;
Pozadí se nebude opakovat, ale zobrazí se pouze jeden obrázek.
background-size: 500px 200px;
to doplňkový parametr A, které nastavuje velikost pozadí obrázku, šířku a výšku.
Průhlednost obrázků pomocí CSS
V prohlížeči vidíme následující:
Tato vlastnost přišla s příchodem CSS3 a ve skutečnosti získala poměrně rozsáhlé využití. Implementováno pomocí parametru opacity nastavuje průhlednost obrázku, hodnoty od 0 do 1 a druhý parametr filtru: alpha(Opacity=50); dělá totéž pro internetový prohlížeč Explorer proto, že starší verze nepodporují parametr opacity, hodnoty od 0 do 100. V příkladu jsem speciálně vytvořil dva obrázky, abyste jasně viděli rozdíl.
Tímto končí lekce CSS Image Properties, doufám, že tato lekce pro vás byla užitečná a inspirovala vás k dalšímu studiu jazyka a získání nových znalostí.
Datum publikace: 2014-04-22
Obrázky jsou součástí téměř každého webu, takže změna velikosti je nepostradatelná. Existují 2 způsoby, jak změnit velikost obrázku: grafický editor nebo programově html kód na css.
Pokud v css kód na html nenastavujte velikost obrázku, pak bude jeho výška a šířka na webu stejná v pixelech jako v zdrojový soubor. To znamená, že můžete změnit velikost obrázku bez css a html pouze pomocí grafického editoru a automaticky se změní na webu, pokud nezadáte jeho velikost. Existují ale případy, kdy potřebujete programově změnit velikost obrázku v css na html.
1. Změna obrázku v grafickém editoru
Velikost obrázku můžete změnit v libovolném grafickém editoru (photoshop, gimp, xnview) a na webu se automaticky změní v souladu s původní velikostí.
Výhody metody:
Obrázek se načítá rychleji, protože není potřeba stahovat další data (pixely), která se pak programově komprimují.
mínusy:
Grafické editory špatně komprimují obrázky menší než 200 pixelů na šířku a výšku.
Kdykoli je to možné a vhodné, zkuste změnit jeho velikost v grafickém editoru, aby se obrázky načítaly rychleji než při programové změně velikosti. Rozdíl v rychlosti může být desetinásobný.
2. Změna obrázku v kódu css na webu
Profesionálové:
Rychlejší a pohodlnější nastavení velikosti. Tato metoda zmenšení obrazu se obvykle používá pro pohodlí. Například, když jeden obrázek může mít mnoho různých velikostí, je často pohodlnější změnit hodnoty toho samého programově, než nahrávat všechny možnosti formátu jednoho obrázku upraveného v grafickém editoru.
Kvalitativně komprimované malé obrázky, méně než 200 pixelů na výšku nebo šířku, na rozdíl od grafických editorů. Pokud chcete, aby velikost obrázku byla na webu menší než 200 pixelů, je lepší, aby byla původní velikost o 30–50 % (260–300 pixelů) větší, abyste uložili dobrá kvalita při snižování.
Rozdíl v rychlosti načítání stránek zároveň nebude cítit, protože malé obrázky zabírají velmi málo místa a pokud jejich velikost zvětšíte o 30 %, nezaznamenáte žádné změny. Všimněte si ale rozdílu v kvalitě.
mínusy:
Programově komprimované obrázky se načítají déle, protože ke změně velikosti dochází až po stažení původní verze. Pokud je tedy velikost obrázku větší než 200 pixelů na šířku nebo na výšku, pak je lepší jej zkomprimovat v grafickém editoru, aby web fungoval rychleji.
jak změnit velikost html obrázku pomocí css
Chcete-li změnit velikost obrázku v html css vlastnosti se používají šířka (šířka) a výška (výška) uvnitř atributu style. Můžete napsat pouze šířku nebo výšku a zbývající nespecifikovaná hodnota se automaticky změní při zachování poměru stran obrázku. Například zadáním pouze šířky obrázku pomocí šířky se jeho výška automaticky změní, přičemž se zachová poměr stran. A naopak, při zadání pouze výšky (výšky) se automaticky změní i její šířka se zachováním poměru stran obrázku.
Příklad kódu bez zadání rozměrů obrázku
Výsledek v prohlížeči
Kód stránky
Příklad kódu se změnou velikosti obrázku v .css
Výsledek v prohlížeči
Kód stránky
style="width:150px; ">
Oba výše uvedené příklady používají stejný obrázek o velikosti 300x184px (šířka a výška). V 1 příkladu byl obrázek zobrazen v prohlížeči beze změn s původní velikostí 300x184px, protože šířka a výška nebyla v css zadána. A ve 2. příkladu byl obrázek zobrazen v prohlížeči zmenšený 2krát, protože šířka byla zadána na 150px, výška se automaticky změnila na 92px. Jak vidíte, vlastnost height nemusí být vůbec zadána, protože se automaticky mění v poměru k šířce.
Pokud poskytnete obě možnosti: šířka (šířka), výška (výška) a nebudou odpovídat proporcím, pak bude mít obrázek přesně takovou velikost, ale v komprimované nebo roztažené podobě, v závislosti na hodnotách.
Proč je nežádoucí zvětšovat obrázky
Důležité: Zvýšení velikosti obrázku je doprovázeno ztrátou kvality. Při jakékoli změně je důležité nastavit hodnoty méně než na původním obrázku, tedy pouze snížit.
Pokud nastavíte velikost v pixelech větší než původní obrázek, kvalita se zhorší. A ztráta kvality bude jasně viditelná, protože počítač neumí přidávat nové pixely, může pouze zvětšovat velikost stávajících. Čím větší je zvětšení obrázku od původní hodnoty, tím horší je jeho kvalita a lépe viditelné čtvercové pixely.
Chcete-li změnit velikost obrázku pomocí HTML pro značku jsou poskytovány atributy width (width) a height (height). Jako hodnota se používají pixely a argumenty musí odpovídat fyzickým rozměrům obrázku. Například na Obr. 10.6 ukazuje obrázek, který má rozměry 100x111 pixelů.
Rýže. 10.6. obrázek v původní velikosti
V souladu s tím je HTML kód pro umístění tohoto obrázku uveden v příkladu 10.4.
Příklad 10.4. Rozměry výkresu
Pokud jsou rozměry obrázku specifikovány explicitně, pak je prohlížeč použije k zobrazení prázdné oblasti odpovídající obrázku při načítání dokumentu (obr. 10.7). V opačném případě prohlížeč před změnou šířky a výšky obrázku čeká na úplné načtení obrázku (obrázek 10.8). V tomto případě může dojít k přeformátování textu, protože zpočátku není známa velikost obrázku a je automaticky nastavena na malou.
Rýže. 10.7. Velikost obrázku není zadaná a ještě se nenačetl
Rýže. 10.8. Obrázek nahrán, text přeformátován
Šířku a výšku obrázku lze měnit nahoru i dolů. To však nijak neovlivňuje rychlost stahování obrázku, protože velikost souboru zůstává nezměněna. Snižujte proto obraz opatrně, protože. to může mezi čtenáři způsobit zmatek, proč se tak malý výkres načítá tak dlouho. Zvětšení velikosti však vede k opačnému efektu – velikost obrázku je velká, ale soubor se načítá rychleji než obrázek stejné velikosti.
Na Obr. 10.9 ukazuje stejný obrázek jako na Obr. 10,6, ale zdvojnásobil šířku a výšku.
Rýže. 10.9. Pohled na obrázek zvětšený v prohlížeči
Kód pro takový výkres zůstane téměř nezměněn a je znázorněn v příkladu 10.5.
Příklad 10.5. Změna velikosti obrázku
Taková změna velikosti se nazývá převzorkování a algoritmus prohlížeče je ve svých schopnostech horší než grafické editory. Proto je nutné takto zvětšovat obraz jen ve speciálních případech, jinak se kvalita obrazu příliš zhoršuje. Je lepší použít nějaký grafický program. Výjimkou jsou výkresy obsahující obdélníkové oblasti. Na Obr. Obrázek 10.10 ukazuje soubor vzoru, který zabírá 54 bajtů a má původní velikost 8 x 8 pixelů v měřítku až 150 pixelů.
Rýže. 10.10. Zvětšený obrázek
Prohlížeče používají dva algoritmy pro převzorkování – bikubický (dává hladké okraje a hladký tonální rozsah barev) a nejbližší body (zachovává původní sadu barev a ostré hrany). Nejnovější verze prohlížečů používají bikubický algoritmus, zatímco starší prohlížeče naopak používají algoritmus nejbližšího bodu.
Návod
Nejprve zkuste obrázek najít pomocí vyhledávačů. Zadejte dotaz a poté vyberte kartu nastavení vyhledávání. Google má například tlačítko „Vyhledávací nástroje“, zatímco Yandex má ikonu s posuvníky. Poté musíte vybrat položku "Velikost" a zadat přesné hodnoty. Nebo pokud například potřebujete fotografii s dobrým rozlišením, zvolte „Velká“.
Pokud není k dispozici žádný obrázek s požadovanou velikostí, lze jej upravit na rám sami. Existují způsoby. První je, že nejprve vytvoříte dokument s požadovanou velikostí a poté změníte obrázek. Druhá je opačná - otevřete obrázek a změňte velikost. Není v tom v podstatě žádný rozdíl: vše závisí na vašich preferencích a cílech. Příklady budou zváženy v Adobe Photoshopu, ale můžete použít i jiné grafické editory.
První způsob. Klikněte na "Soubor" - "Vytvořit ..." nebo na kombinaci kláves Ctrl + N. Před vámi se objeví okno s nastavením. Zde zadejte šířku, výšku a požadované parametry barevného rozlišení. Poté v prohlížeči otevřete obrázek, který se vám líbí, klikněte pravým tlačítkem a vyberte „Kopírovat obrázek“. Poté se vraťte do programu a stiskněte kombinaci Ctrl + V.
Obrázek se objeví v okně grafického editoru. Poté klikněte na "Úpravy" - "Volná transformace" nebo na kombinaci Ctrl + T. Objeví se klíčové body, s jejichž pomocí přizpůsobíte obrázek velikosti pracovního okna. Jakmile získáte požadovaný výsledek (mimochodem, můžete jít za hranice pracovní oblasti), klikněte na "Soubor" - "Uložit jako ..." nebo na kombinaci kláves Ctrl + S.
Druhý způsob. Nejprve musíte přejít k počítači, poté kliknout na "Soubor" - "Otevřít ..." (nebo na kombinaci Ctrl + O) a vybrat požadovaný obrázek. Poté vyberte "Obrázek" - "Velikost obrázku ..." nebo stiskněte Alt + Ctrl + I. Zrušte zaškrtnutí políčka „Zachovat poměr stran“ a vyberte požadovanou velikost. Potom stiskněte tlačítko OK.
Velikost fotografie bude upravena na zadanou velikost v centimetrech (milimetrech, palcích) a také na zadanou velikost v DPI podle standardů tisku na papír. Rozměry v cm, mm a palcích lze zadat s přesností na tisíciny, například místo formátu 15x10 můžete nastavit 15,201x10,203 cm.
Tabulka se standardními velikostmi fotografií ve svislé poloze (na výšku):
| Formát fotografie v centimetrech (cm) | Velikost v milimetrech (mm) | Velikost v pixelech (pro tisk 300 dpi) |
Poměr stran (v orientaci na šířku) |
| 3x4 (po ručním řezání) | 30x40 | 354x472 | 4:3 (1.33) |
| 3,5x4,5 (po ručním řezání) | 35x45 | 413 x 531 | 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 x 305 | 2362 x 3543 | 3:2 (1.5) |
| 30x40 | 305x406 | 3543 x 4724 | 4:3 (1.33) |
| 30x45 | 305x457 | 3543 x 5315 | 3:2 (1.5) |
Standardní velikost listu papíru Formát A4- 21x29,7 cm nebo 2480x3508 pixelů při 300 dpi. Rozměry ostatních formátů listů jsou k vidění na stránce Wikipedie, jen nezapomeňte, že rozměry jsou tam uvedeny v milimetrech a palcích, tzn. v nastavení na této stránce je třeba vybrat příslušnou hodnotu.
Pokud potřebujete změnit velikost fotografie bez zohlednění DPI (bodů na palec), tedy pouze respektování proporcí zadaného formátu, pak je potřeba v nastavení nastavit parametr „Velikost v DPI“ na „0“.
Původní obrázek se nijak nemění. Dostanete další zpracovaný obrázek.