Ovládání velikosti obrázku na pozadí pomocí css. Škálování na maximální velikost
Vizuálně poznám rozdíl, ale v jakých situacích bych si měl vybrat jedno místo druhého? Má smysl je vůbec používat nebo je lze nahradit procenty?
Aktuálně se jakoby nedokážu dostat za metodu pokus-omyl používání těchto vlastností, kde mi jde hlava kolem.
Také mi připadají vysvětlení docela vágní a zvláště dokument W3C mi připadá docela matoucí.
Hodnoty mají následující význam:
"obsahuje
Změňte měřítko obrázku při zachování jeho vnitřního poměru stran (pokud existuje), dokud velká velikost, aby se jeho šířka a výška vešly do oblasti umístění pozadí.
Změňte měřítko obrázku při zachování jeho vnitřního poměru stran (pokud jej má) na nejmenší velikost, aby jeho šířka a výška mohla zcela pokrýt oblast umístění pozadí.
Asi jsem trochu tlustý, ale může mi někdo dát jednoduché vysvětlení angličtina s relativními příklady?
6 odpovědí
Můžete se podívat na pseudo kódy, které řídí výstup. Hodnoty přidělené velikosti obrázku přímo závisí na poměru stran kontejneru obrázek na pozadí.
Poznámka: Poměr stran = šířka / výška
Obsahuje
if (poměr stran kontejneru > poměr stran obrázku) image-height = výška kontejneru image-width = zachovaná šířka-poměr stran else image-width = šířka kontejneru image-height = poměr stran-zachovaná výškaPokrýt
if (poměr stran kontejneru > poměr stran obrázku) image-width = šířka kontejneru image-height = poměr stran-zachovaná výška else image-height = výška kontejneru image-width = poměr stran-zachovaná šířkaVidíš ten postoj? V obou případech, obálka i obsah, je zachován poměr stran. Ale podmínky if - else platí v obou případech.
To je to, co kryt dělá pro pokrytí celou stránku, bez viditelné bílé části. Když je poměr stran kontejneru větší, upravte měřítko obrázku tak, aby se jeho šířka rovnala šířce kontejneru. Nyní bude výška větší, protože poměr stran je menší. Pokrývá tedy celou stránku bez jakékoli bílé části.
Q. Mohou být nahrazeny úroky?
Ne, nejen procentuálně. Budete potřebovat klimatizaci.
Otázka: V jakých situacích bych si měl vybrat jednu po druhé?
Když vytváříte web, nechcete mít bílou část na pevném pozadí. Takže použijte kryt.
obsahovat, na druhou stranu lze použít, když používáte opakující se pozadí (například když máte obrázek s velmi vysokým poměrem stran podle veiwport/container, můžete použít include a nastavit background-repeat na repeat-y ). Ale vhodnější použití pro include by bylo pro pevný prvek výška/šířka.
I když otázka předpokládá, že čtenář již rozumí tomu, jak fungují hodnoty include a cover pro velikost pozadí, zde je jednoduchá anglická parafráze toho, co říká specifikace, která může sloužit jako rychlý základ:
background-size: include zajišťuje, že se vejde celý obrázek na pozadí oblast pozadí, zachování původního poměru stran. Pokud je oblast pozadí menší než obrázek, obrázek se zmenší tak, aby se vešel do oblasti pozadí. Je-li oblast pozadí nad obrázkem nebo nad obrázkem, pak všechny části oblasti, které nezabírá hlavní obrázek, budou vyplněny opakováním obrázku nebo písmeny/prázdnými znaky, pokud je opakování pozadí nastaveno na neopakovat .
background-size: cover zvětší obrázek na pozadí tak, aby byl co největší, takže vyplní celou plochu pozadí bez zanechání mezer. Rozdíl mezi krytím a 100% 100% je v tom, že je zachován poměr stran obrazu, takže nedochází k nepřirozenému roztahování obrazu.
Všimněte si, že žádnou z těchto dvou hodnot klíčových slov nelze vyjádřit pomocí jakékoli kombinace délek, procent nebo automatických klíčových slov.
Kdy tedy použijete jedno přes druhé? Osobně si myslím, že cover má na víc praktická aplikace než obsahovat , takže půjdu první. 1
velikost pozadí: obálka
Jeden obecný příklad Použití background-size: cover je ve formátu na celou obrazovku, kde je obrázek na pozadí bohatý na detaily, jako je fotografie, a chcete, aby byl tento obrázek zobrazen nápadně, i když jako pozadí na rozdíl od hlavního obsahu.
Chcete, aby byl obrázek dostatečně velký, aby zcela zakryl výřez nebo obrazovku prohlížeče, bez ohledu na poměr stran výřezu nebo na to, zda je obrázek nebo výřez na výšku nebo zobrazení alba. Je vám jedno, jestli to způsobí oříznutí nějaké části obrázku, pokud obrázek vyplní celou plochu pozadí a zachová si svůj původní poměr stran.
Zde je příklad rozvržení, kde je obsah umístěn na průsvitném bílém pozadí, které je umístěno nad pozadím celé obrazovky. Když zvýšíte výšku oblasti náhled, všimněte si, že obrázek se automaticky změní, aby bylo zajištěno, že stále pokrývá celou oblast náhledu.
Html ( výška: 100 %; obrázek na pozadí: url(http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg); poloha pozadí: střed uprostřed; velikost pozadí: obal; pozadí -repeat: no-repeat: fixed ) body ( width: 80%; min-height: 100%; background-color: rgba(255, 255, 255, 0.5); margin: 5em auto; padding: 1 m)
Pokud použijete background-size: include , stane se místo toho obrázek na pozadí zkomprimovaný tak, aby se celý obrázek vešel do oblasti náhledu. Kolem obrázku tak zůstanou nevzhledné bílé letterboxy v závislosti na poměru stran náhledového panelu, což kazí efekt.
background-size: obsahovat
Proč tedy používat background-size: include, pokud kolem obrázku zůstane ošklivé bílé místo? Jeden případ použití, který okamžitě přijde na mysl, je, že návrhář nepotřebuje bílé místo, pokud se celý obrázek vejde do oblasti pozadí.
To se může zdát přitažené za vlasy, ale počítejte s tím, že ne všechny obrázky vypadají špatně, když je kolem nich prázdný prostor. Zde to skutečně dokazuje příklad použití loga místo fotografie tím nejlepším možným způsobem, i když logo jako obrázek na pozadí pravděpodobně nepoužijete.
Logo má obvykle nepravidelný tvar, sedí na prázdném místě nebo zcela průhledné pozadí. Vznikne tak plátno, které lze naplnit plná barva nebo jiné pozadí. Use background-size: include zajistí, že celý obrázek bude odpovídat pozadí bez jakýchkoliv jeho částí, ale obrázek bude na plátně stále vypadat jako doma.
To ale nemusí platit pro obrázek nepravidelný tvar. Lze jej použít i na obdélníkové obrázky. Dokud požadujete, aby nedocházelo k ořezávání obrázku na pozadí, lze bílé místo považovat za rozumný kompromis nebo jej vůbec nemít velký význam. Pamatujte na rozvržení pevná šířka? Přemýšlejte o velikosti pozadí: obsahují v podstatě to, ale pro obrázky na pozadí v orientaci na výšku i na šířku: pokud můžete zaručit, že se obsah vždy vejde do ohraničení obrázku na pozadí, pak se mezery stanou irelevantními pro problém.
Jedním z hlavních úkolů, kdy adaptivní rozložení- jedná se o změnu měřítka obrázků (včetně pozadí) tak, aby byly správně zobrazeny na zařízeních s různá rozlišení obrazovky.
S obrázky ve štítku img Je to jednoduché: když nastavíte šířku v procentech, výška se automaticky změní. Tuto metodu nelze použít na obrázky na pozadí.
Tento trik spočívá v nastavení procentuální hodnoty výplně ( vycpávka) prvek. Metoda byla poprvé publikována ve starém článku na blogu A List Apart, ale stále funguje dobře.
Řekněme, že máte obrázek na pozadí o velikosti 800 x 450 pixelů a chcete z něj vytvořit pozadí s pevným poměrem stran 16:9. Níže uvedený kód se používá pro odsazení px, ale vše bude fungovat em. K dispozici je také prvek obrázku HTML5 správné fungování ve starších prohlížečích můžete použít HTML5 shiv.
Div.column ( max. šířka: 800 pixelů; ) figure.fixedratio ( padding-top: 56,25 %; /* 450 pixelů/800 pixelů = 0,5625 */ )
Přidání pozadí
Výsledný prvek se změní podle očekávání, ale pokud přidáte obrázek na pozadí, výsledek nebude příliš dobrý. Pomocí atributu background-size: cover. Bohužel v Internet Explorer 8 tato metoda nefunguje. K vyřešení tohoto problému umístíme pozadí pomocí pozadí-pozice. Obrázek na pozadí musí být alespoň tak široký jako max. šířkaživel. V opačném případě bude obrázek oříznut.
Div.column ( /* pozadí obrázek musí být široký 800 pixelů */ max. šířka: 800 pixelů; ) figure.fixedratio ( padding-top: 56,25 %; /* 450px/800px = 0,5625 */ background-image: url(http://voormedia.com/examples/north-sea-regatta.jpg); background-size: cover -moz-background-size: cover /* Firefox 3.6 */ background-position: center;
Řekněme, že máte velký obrázek na pozadí, který vypadá skvěle na ploše. Ale na mobilním zařízení bude příliš malý, takže správné rozhodnutí zmenší šířku pozadí.
Například obrázek o šířce 800 x 200 pixelů (4:1) na malé obrazovce o šířce 300 pixelů by měl být zmenšen na 150 pixelů (2:1). Pojďme počítat atributy výška A polstrování-top:
Obrázek ukazuje poměr stran obrázku na pozadí při různých šířkách. Sklon grafu odpovídá atributu polstrování-top, počáteční výška - do atributu výška. Výsledný kód je:
Div.column ( /* The obrázek na pozadí musí mít šířku 800 pixelů */ max. šířka: 800 pixelů; ) figure.fluidratio ( padding-top: 10%; /* sklon */ výška: 120px; /* počáteční výška */ background-image: url(http://voormedia.com/examples/amsterdam.jpg); background- size: cover -moz-background-size: cover; /* Firefox 3.6 */ background-position: center;
Použití SCSS pro výpočet
Atributy polstrování-top a výška lze vypočítat automaticky pomocí preprocesorů, jako je SCSS. Příklad tohoto:/* Vypočítat poměr tekutin na základě dvou rozměrů (šířka/výška) */ @mixin fluid-ratio($large-size, $small-size) ( $width-large: nth($large-size, 1); $width -small: nth($small-size, 1); $height-large: nth($large-small, $height-small: nth($small-velikost, 2); / ($width-large - $width-small: $height-small - $width-small * $slope * 100%; ; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ ) figure.fluidratio ( /* Tento prvek bude mít poměr proměnlivosti od 4:1 při 800px do 2:1 při 300px. */ @include fluid-ratio(800px 200px, 300px 150px obrázek na pozadí: url(http://voormedia.com/examples/amsterdam.jpg);
Od autora: V tomto tutoriálu se podíváme na jednoduchou techniku vytvoření obrázku na pozadí, který se roztáhne přes celou šířku výřezu prohlížeče. K tomu potřebujeme vlastnost CSS background-size; Není potřeba žádný JavaScript.
Příklady responzivních celočíselných obrázků na pozadí
V dnešní době se stalo poměrně populární používat jako pozadí obrovskou fotku, která zabírá celou webovou stránku. Zde jsou příklady několika webů, které mají responzivní celé obrázky na pozadí:
Pokud byste chtěli dosáhnout podobného výsledku ve svém dalším webovém projektu, pak je tento článek to, co potřebujete.
Základní principy
Zde je náš akční plán.
Použijte vlastnost background-size k úplnému vyplnění výřezu
Vlastnost CSS background-size je nastavena na cover. Hodnota obalu říká prohlížeči, aby automaticky a proporcionálně změnil šířku a výšku obrázku na pozadí tak, aby byla vždy stejná nebo větší než šířka/výška výřezu.
Pomocí dotazu na média zpracujte malé obrázky na pozadí mobilní zařízení
Abychom zvýšili rychlost načítání stránky na malých obrazovkách, použijeme mediální dotaz ke zpracování menší verze našeho obrázku na pozadí. Toto je nepovinné. Tato technika bude fungovat i bez něj. Proč je ale použití malého obrázku na pozadí pro mobilní zařízení dobrý nápad?
Obrázek, který jsem použil v ukázce, má rozlišení 5500x3600px. Toto rozlišení je dostatečné pro většinu širokoúhlých obrazovek počítačové monitory, aktuálně k prodeji. K tomu však budete muset zpracovat soubor o velikosti 1,7 MB.
Tato obrovská zátěž navíc jen kvůli zveřejnění fotky na pozadí stejně nebude k ničemu. A samozřejmě to bude mít extrémně špatný vliv na připojení, která používají mobilní internet. Toto rozlišení je také nadměrné pro zařízení s malými obrazovkami (podrobněji se na to podíváme později). Podívejme se na celý proces.
HTML
Vše, co potřebujete pro označení, je toto:
Elementu body přiřadíme obrázek na pozadí, aby obrázek vždy vyplnil celý výřez prohlížeče.
Tato technika však také bude fungovat pro každého blokový prvek(např. div nebo formulář). Pokud je šířka a výška prvku bloku plynulá, obrázek na pozadí se vždy změní tak, aby vyplnil celý kontejner.
CSS
Nastavte pro element body následující styly:
body ( /* Cesta k obrázku */ background-image: url(images/background-photo.jpg); /* Obrázek na pozadí je vždy vycentrován svisle a vodorovně */ background-position: center center; /* Obrázek na pozadí se neopakuje * / background-repeat: no-repeat /* Obrázek na pozadí je ve výřezu pevný, takže se nepohybuje, když je výška obsahu větší než výška obrázku */ background-attachment: fixed /*; To umožňuje, aby se obrázek na pozadí přizpůsobil velikosti kontejneru */ background-size: cover /* Sets; barva pozadí, který se zobrazí při načítání obrázku na pozadí */ background-color: #464646; )
tělo ( /* Cesta k obrázku */ pozadí - obrázek : url (obrázky / pozadí - fotografie . jpg ) ; /* Obrázek na pozadí je vždy vycentrován svisle a vodorovně */ /* Obrázek na pozadí se neopakuje */ pozadí - opakovat : ne - opakovat ; /* Obrázek na pozadí je ve výřezu pevně daný, takže se nepohybuje, když je výška obsahu větší než výška obrázku */ /* To umožňuje, aby se obrázek na pozadí přizpůsobil velikosti kontejneru */ velikost pozadí: obálka; /* Nastaví barvu pozadí, která se zobrazí při načítání obrázku na pozadí */ pozadí - barva : #464646; |
Nejdůležitější dvojice vlastnost/hodnota, které je třeba věnovat pozornost, je:
background-size: cover;
velikost pozadí: obálka; |
Tady začíná kouzlo. Tato dvojice vlastnost/hodnota říká prohlížeči, aby proporcionálně zmenšil obrázek na pozadí, tzn. tak, aby jeho šířka a výška byla stejná nebo větší než šířka/výška prvku (v našem případě prvku tělo).
S tímto párem vlastnost/hodnota je však jeden problém: pokud je obrázek na pozadí menší velikosti body element – což se stane na obrazovkách s vysokým rozlišením a/nebo když máte na stránce obrovské množství obsahu – prohlížeč nevyhnutelně přiblíží obrázek. A jak víme, když zvětšujeme velikosti bitmapa, kvalita obrazu se snižuje (jinými slovy dochází k pixelizaci).
Zvětšení velikosti obrázku vzhledem k původní velikosti ovlivňuje kvalitu obrazu. Myslete na to při výběru správného obrázku. Demo používá obrovskou fotografii 5500x3600px širokoúhlé monitory, takže to bude trvat hodně velká obrazovka takže dojde ke zkreslení kvality. Jdeme dál. Abychom zajistili, že obrázek na pozadí bude vždy vycentrován ve výřezu, napíšeme:
pozadí-pozice: střed střed;
pozadí - pozice : střed střed ; |
Tato položka umístí pozadí na souřadnicovou osu do středu výřezu. Dále musíme definovat, co se stane, když výška obsahu překročí viditelnou výšku výřezu. Když k tomu dojde, zobrazí se posuvník.
V v tomto případě musíme se ujistit, že obrázek na pozadí zůstane zapnutý původní místo, i když uživatel posouvá stránku dolů. V této situaci se obrázek buď jednoduše ukončí při rolování, nebo se bude pohybovat v průběhu rolování (což může uživatele velmi rušit). Pro opravu pozadí nastavíme vlastnost background-attachment na pevné.
pozadí-příloha: pevná;
pozadí - uchycení: pevné; |
V ukázce jsem přidal možnost „načíst obsah“, abyste viděli, co se stane, když se v prohlížeči objeví posuvník, když je vlastnost background-attachment nastavena na pevnou. Můžete si také stáhnout ukázku a pohrát si s hodnotami vlastností umístění (jako je background-attachment a background-position), abyste viděli, jak to ovlivňuje posouvání stránky a obrázek na pozadí. Zbytek hodnot vlastností je docela samozřejmý.
Zkratka CSS
Vlastnosti pozadí jsem podrobně popsal, aby bylo snazší je vysvětlit. Zkrácená forma bude také ekvivalentní:
tělo ( pozadí: url(pozadí-foto.jpg) střed středový kryt bez opakování opraveno; )
tělo ( pozadí : url (fotografie na pozadí . jpg ) střed středová obálka neopakovat opraveno ; |
Vše, co musíte udělat, je změnit hodnotu url tak, aby ukazovala na váš obrázek na pozadí.
Volitelné: Dotaz na média pro malé obrazovky
Pro malé obrazovky jsem použil Program Photoshop, pro proporcionální zmenšení původního obrázku na pozadí na 768x505px a také jsem použil Smush.it, abych velikost ještě trochu zmenšil. Díky tomu se velikost souboru zmenšila z 1741KB na 114KB. Tito. velikost obrázku zmenšena o 93 %.
Nechápejte mě prosím špatně, 114KB je na čistě estetický designový prvek stále docela dost. S ohledem na dodatečné zatížení 114KB bych takový soubor použil pouze v případě, že bych viděl příležitost výrazně zlepšit uživatelský zážitek (UX) webu, protože... PROTI přítomný okamžik významný podíl internetového provozu pochází z provozu mobilních zařízení pozadí - obrázek: url (obrázky / pozadí - fotografie - mobil - zařízení. jpg);
Dotaz na média má limit šířky max-width: 767px, což znamená, že pokud je zobrazovaná oblast prohlížeče větší než 767px, načte se velký obrázek na pozadí.
Nevýhodou použití tohoto mediálního dotazu je, že pokud změníte šířku okna vašeho prohlížeče, například z 1200px na 640px (nebo naopak), okamžitě uvidíte okamžik načtení malého nebo velkého obrázku na pozadí.
Kromě toho kvůli skutečnosti, že některá zařízení s malou obrazovkou mohou zobrazovat více pixelů – například iPhone 5 c sítnicový displej schopný zobrazit rozlišení 1136x640px - malý obrázek na pozadí bude pixelován.
Abych to shrnul
Můžete vidět více aktuální verze zdrojový kód z tohoto výukového článku na GitHubu. Mohu vás varovat pouze před jednou věcí: prosím používejte tuto techniku opatrně, protože velké soubory mohou vážně poškodit UX, zvláště pokud koncový uživatel používá pomalé a nespolehlivé internetové připojení. I proto byste měli zvolit vhodnou barvu pozadí, aby uživatel mohl číst obsah během načítání obrázku na pozadí.
Jednou z nejčastěji používaných vlastností CSS při vývoji webových stránek je vlastnost pozadí prvku stránky. Dnes si s vámi povíme, jak můžete změnit velikost obrázku na pozadí pomocí .
Ve starším CSS verze 2.1 obrázek na pozadí aplikovaný na kontejner zůstal zachován pevné velikosti. Nebylo možné změnit velikost obrázku na pozadí. Naštěstí CSS3 zavedlo vlastnost background-size, která umožňuje roztažení nebo komprimaci pozadí.
Existuje několik způsobů, jak určit velikosti -.
Absolutní změna velikosti
Pokud je zadána pouze jedna hodnota, považuje se za šířku. Výška je nastavena na auto a proporce jsou zachovány:
Tento kód změní měřítko obrázku od 200x200 do 100x100 pixelů.
Relativní změna velikosti prostřednictvím procent
Pokud jsou použity procenta, jsou rozměry založeny na prvku a NE na obrázku:
Vyplňte pozadím
Vlastnost background-size také rozumí klíčové slovo pokrýt. Obrázek bude zmenšen tak, aby vyplnil celý kontejner, ale pokud jsou poměry stran odlišné, bude obrázek oříznut.
| : kryt; |
Změna měřítka více pozadí
Více pozadí lze škálovat pomocí seznamu hodnot oddělených čárkami ve stejném pořadí.
| pozadí : url ("ovce.png" ) 60% 90% bez opakování , url ("ovce.png" ) 40% 50% bez opakování , url ("ovce.png" ) 10% 20% bez opakování # 393; : 240px 210px, auto, 150px; |
Vše nejnovější verze prohlížeče podporují vlastnost background-size.
Závěr
Nyní víme, jak ovládat velikost obrázku na pozadí pomocí kaskádové tabulky styly
Nezapomeňte se přihlásit k odběru aktualizací blogu, aby vám neunikly nové zajímavé články.
Rozlišení monitorů neustále roste a při rozvržení webových stránek musíme nejvíce počítat široký rozsah oprávnění. To je důležité zejména při používání obrázek na pozadí, který se buď při nízkém rozlišení monitoru ořízne, nebo naopak úplně nesedí při vysoké rozlišení. Jedním z řešení této situace je škálování pozadí. To samozřejmě slibuje určité potíže, jako je výskyt zkreslení a artefaktů v obrázcích, ale také rozšiřuje arzenál nástrojů pro rozložení.
Velikost je řízena vlastností background-size; klíčové slovo cover lze zadat jako hodnotu, pak bude velikost obrázku taková, aby se do něj vešla jeho šířka a výška specifikovaná oblast(například okno webové stránky); Klíčové slovo include změní měřítko obrázku tak, aby alespoň jedna strana obrázku zcela zapadla do určené oblasti. Kromě toho je přijatelné uvést explicitní horizontální nebo vertikální rozměry v procentech nebo jinak CSS jednotky. Na Obr. 1 ukazuje změnu velikosti obrazu, když různé významy velikost pozadí. Šedá je vybrán blok 280x200 pixelů, uvnitř kterého je nastaveno pozadí.
Rýže. 1. Vzhled obrázků na pozadí v závislosti na hodnotě velikosti pozadí
Pokud jsou zadány dvě hodnoty velikosti oddělené mezerou, pak první hodnota určuje horizontální šířku a druhá určuje vertikální šířku. V tomto případě jsou proporce ignorovány, což je jasně vidět na obr. 1 rok Místo jedné z velikostí je přípustné použít klíčové slovo auto , prohlížeč to pak vypočítá automaticky na základě proporcí obrázku.
Příklad 1 nastaví fotografii na pozadí, která zabírá celé okno prohlížeče.
Příklad 1. Obrázek na pozadí
Výsledek tento příklad znázorněno na Obr. 2. Při změně velikosti okna se fotografie zvětší nebo zmenší, aby zaplnila celou webovou stránku.
