Obrázek na plné obrazovce je to efektivní způsob, jak upoutat pozornost návštěvníků vašeho webu. To vám umožní vytvořit působivý a nezapomenutelný vzhled a zdůraznit důležité okamžiky. V tomto podrobném návodu vám řekneme, jak upravit obrázek na celou obrazovku pomocí HTML.
Pro začátek je nutné použít značku img pro vložení obrázku na stránku. Zadejte cestu k obrázku v atributu src. Například:
Dalším krokem je pak Nastavení CSS pro dosažení požadovaného výsledku. K nastavení celé obrazovky pro obrázek použijte následující kód CSS:
imgwidth: 100%;
height: auto;
object-fit: cover;
position: fixed;
top: 0;
left: 0;
z-index: -1;
>
Nyní, když jste nastavili nastavení CSS pro obrázek na celou obrazovku, zbývá pouze přidat tento kód CSS na stránku. Můžete jej vložit buď do samostatného souboru stylů, nebo jej povolit přímo uvnitř značky na stránce.
Nyní, když víte, jak nastavit obrázek na celou obrazovku pomocí HTML a CSS, můžete tuto techniku použít k vytvoření působivých webových stránek a upoutání pozornosti vašeho publika.
Obrázek na celou obrazovku: pokyny krok za krokem
Pokud chcete upravit obrázek tak, aby se zobrazoval na celou obrazovku, budete muset postupovat podle těchto jednoduchých kroků:
| Krok 1: | Otevřete svůj dokument HTML v textovém editoru. |
| Krok 2: | Přidejte prvek |
| Krok 3: | Přidejte následující CSS kód pro příslušný obrázek: |
| body, html | |
| img | |
| Krok 4: | Uložte provedené změny do souboru HTML. |
| Krok 5: | Otevřete soubor HTML ve webovém prohlížeči a uvidíte obrázek zobrazený na celé obrazovce. |
Nyní bude váš obrázek nakonfigurován tak, aby se zobrazoval na celou obrazovku ve Vašem webovém prohlížeči.
Krok 1: Vyberte vhodný obrázek
Před nastavením obrazu na celou obrazovku je třeba zvolit vhodnou možnost, která bude mít vysoké rozlišení a bude odpovídat vašim preferencím. Je důležité, aby obraz měl správné proporce a byl dostatečně kvalitní, aby při přiblížení na celou obrazovku neztratil detaily.
Pokud nemáte hotový obrázek, můžete využít různé online zdroje, kde najdete bezplatné obrázky ve vysoké kvalitě.
Když vyberete vhodný obrázek, zapamatujte si jeho umístění, protože budete potřebovat jeho cestu k nastavení na celou obrazovku.
Krok 2: Změňte velikost obrázku pomocí CSS
Jakmile přidáte obrázek na svou webovou stránku, možná budete muset změnit jeho velikost, aby zabíral celou dostupnou plochu obrazovky.
K tomu můžete pomocí CSS nastavit nové velikosti obrázku.
Příklad kódu CSS, který změní velikost obrázku na celou obrazovku:
| CSS kód |
|---|
| img |
| width: 100%; |
| height: auto; |
| > |
Tento kód můžete přidat do značky na vaší webové stránce a použít jej na obrázek.
V tomto příkladu je vlastnost width nastavena na 100%, což znamená, že šířka obrazu se natáhne na šířku obrazovky. Vlastnost height je nastavena na auto, aby se zachovaly proporce obrazu.
Po přidání tohoto CSS kódu by se obrázek na vaší webové stránce měl automaticky změnit a obsadit celou dostupnou plochu obrazovky.
Krok 3: Upravte obrázek na pozadí
Chcete-li nastavit obrázek na pozadí na celou obrazovku, musíte k prvkům stránky HTML přidat speciální vlastnost. K nastavení obrázku jako pozadí můžete například použít vlastnost CSS background-image.
Zde je příklad kódu, který vám umožní nastavit obrázek na pozadí pro položku :
body
V tomto příkladu vlastnost background-image označuje cestu k obrázku, který chcete použít jako pozadí. Nahraďte "cesta_k_obraz" skutečnou cestou k vašemu obrázku na serveru.
Vlastnost background-size: cover; roztahuje obraz po celé ploše prvku, aby jej zcela zakryl. Vlastnost background-position: center; centruje obraz vodorovně a svisle. Nakonec vlastnost background-repeat: no-repeat; zakáže opakování obrazu vodorovně a svisle.
Hodnoty těchto vlastností můžete změnit a přizpůsobit obrázek na pozadí požadavkům vašeho návrhu.
Po použití kódu se váš obrázek na pozadí přizpůsobí celé obrazovce na všech stránkách vašeho webu.