CSS height

CSS height

Właściwość CSS height służy do ustawiania wysokości elementu na stronie internetowej. W kontekście grafiki, np. znacznika <img>, pozwala określić, jak wysoki ma być obraz.

Przykład użycia

img {
  height: 200px;
}

Powyższy kod ustawia wysokość wszystkich obrazów na 200 pikseli.

Typowe wartości

Właściwość height może przyjmować różne jednostki, np.:

• px — piksele, np. height: 150px;
• % — procent wysokości elementu nadrzędnego, np. height: 50%;
• vh — procent wysokości okna przeglądarki, np. height: 100vh;
• auto — wysokość dobierana automatycznie

height a proporcje obrazu

Przy ustawianiu rozmiaru grafiki trzeba uważać, aby jej nie zniekształcić. Jeśli ustawi się jednocześnie width i height na sztywne wartości, obraz może zostać rozciągnięty.

Bezpieczny przykład:

img {
  width: 300px;
  height: auto;
}

W tym przypadku szerokość wynosi 300 px, a wysokość zostanie dobrana automatycznie tak, aby zachować proporcje grafiki.

Różnica między podobnymi właściwościami

• height — ustawia wysokość elementu
• width — ustawia szerokość elementu
• margin — ustawia zewnętrzny odstęp od innych elementów
• padding — ustawia wewnętrzny odstęp między treścią a obramowaniem

Na egzaminie pytanie o wysokość grafiki wskazuje bezpośrednio na właściwość height.