Avatar uživatele
VIO

Jak pomocí CSS kódu nastavit, aby se video či obrázek přizpůsoboval podle zařízení (rozměru obrazu) ?

Např. na počítači se video/obrázek zobrazuje dokonale, ale když stránku navštívím přes telefon, tak videa/obrázku je necelá půlka.
Děkuji předem za radu.

Uzamčená otázka

ohodnoťte nejlepší odpověď symbolem palce

Zajímavá 1Pro koho je otázka zajímavá? yuko před 2290 dny Sledovat Nahlásit



Nejlepší odpověď
Avatar uživatele
anonym

Odpoveď byla označena jako užitečná

vcelku jednoduše … nepoužívejte absolutní jednotky px ale ty které jsou relativně vztaženy k velikosti nadřazeného bloku potažmo tedy rozměrům displaye.

pokud má mít tento obrázek vždy šířku displaye
<img class=„fotografie1“ src=„https://­goo.gl/2HVe1h“ />

stačí do CSS napsat toto
img.fotografie1 {
width: 100%;
}

všimněte si že jako jednotku jsme použili procenta, tedy 100% šiřky nadřazeného bloku tj. v tomto případě šířky displaye. Výška se přizpůsobí automaticky aby zůstal zachován poměr stran. Podobně to funguje i s elementem <video></video>

TIP 1: pokud chcete kombinovat relativní určení rozměru a absolutní. Například pokud chcete určit šířku 100% obrazovky mínus 30 pixelů, použijte v css funkci calc(). Vypadá to pak následovně:
img.fotografie1 {
width: calc(100% – 30px);
}

Upravil/a: anonym

1 NominaceKdo udělil odpovědi nominaci?VIO Nahlásit

Otázka nemá žádné další odpovědi.



Diskuze k otázce

U otázky nebylo diskutováno.

Nový příspěvek
Zajímavé otázky v kategorii Počítače a internet