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

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