Jak rozciągnąć obrazek w HTML?

Aby rozciągnąć obrazek w HTML, możesz skorzystać z różnych technik, w zależności od tego, czy pracujesz z klasycznym elementem <img>, czy z obrazem jako tłem CSS danego elementu. Poniżej znajdziesz szczegółowy poradnik dla obu przypadków z przykładami, wskazówkami dotyczącymi responsywności oraz dobrymi praktykami.

Rozciąganie obrazka za pomocą tagu <img>

Najprostszą metodą jest ustawienie szerokości i wysokości obrazka w prosty sposób:

<img src="obraz.jpg" width="500" height="300">

To rozwiązanie jednak nie jest zalecane w nowoczesnych stronach, ponieważ wymusza konkretne wymiary i często prowadzi do deformacji (obraz traci proporcje).

Dynamiczne rozciąganie do szerokości kontenera

Aby obrazek automatycznie wypełniał szerokość rodzica i zachowywał proporcje, użyj właściwości CSS:

img { width: 100%; height: auto; }

Przykład –

<div style="width: 400px;">
  <img src="obraz.jpg" alt="Opis obrazka" style="width:100%; height:auto;">
</div>

Obraz zostanie rozciągnięty na całą szerokość rodzica – w tym przypadku 400px – i zachowa proporcje.

Wymuszenie zarówno szerokości, jak i wysokości (ryzyko rozciągnięcia)

Możesz rozciągnąć obraz na konkretny rozmiar, ale musisz liczyć się z ryzykiem zniekształcenia proporcji:

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

Rozciąganie obrazka jako tło elementu (CSS background-image)

Ta metoda świetnie sprawdza się, kiedy chcesz umieścić obraz jako tło, np. nagłówka lub sekcji:

.banner {
  width: 100%;
  height: 300px;
  background-image: url('obraz.jpg');
  background-size: cover;
  background-position: center;
}

• background-size: cover – rozciąga tło tak, by zawsze całkowicie pokrywało dany obszar, nawet jeśli część obrazu zostanie „ucięta”;
• background-size: contain – powoduje rozciągnięcie obrazu tak, by cały był widoczny, ale mogą pojawić się puste przestrzenie (letterboxing).

background-size: contain;
background-repeat: no-repeat;
background-position: center;

Responsywność i dobre praktyki

Aby obrazki zawsze dobrze prezentowały się na różnych urządzeniach, pamiętaj o kilku zasadach:

• Dodaj max-width: 100%; – aby obraz nie przekraczał szerokości rodzica i był skalowalny:

img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}

• Przy obrazach w tle CSS, dobierz wysokość zależnie od urządzeń, np. za pomocą zapytania media query –

@media (max-width: 576px) {
  .banner { height: 200px; }
}

To sprawi, że np. hero banner będzie niższy na smartfonach.

Wybrane zastosowania i przykłady

Galeria – obrazki zachowujące proporcje i nieprzekraczające rodzica

.gallery img {
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

Tło sekcji z rozciągnięciem na całą wysokość i szerokość ekranu

.full-background {
  min-height: 100vh;
  background-image: url('tlo.jpg');
  background-size: cover;
  background-position: center;
}

Elastyczna „miniaturka” o określonym stosunku boków

Stwórz ramkę z określonym stosunkiem boków, a obraz ustaw jako tło:

.thumbnail {
  aspect-ratio: 16 / 9;
  background-image: url('miniatura.jpg');
  background-size: cover;
  background-position: center;
  width: 100%;
}

Najczęstsze błędy

• Ustawianie tylko jednej wartości (width lub height) dla <img> – może prowadzić do zniekształceń,
• brak max-width: 100% – obraz może wyjść poza kontener,
• stosowanie tła CSS tam, gdzie obraz powinien być semantyczną treścią (np. galeria, ilustracje do artykułu).

Podsumowanie

• Element <img> i tło CSS można skalować i rozciągać na różne sposoby;
• najbardziej uniwersalne techniki to width: 100%; height: auto; dla <img> oraz background-size: cover; dla obrazów jako tła;
• zawsze testuj zachowanie rozciągniętego obrazka na różnych urządzeniach i szerokościach okna;
• stosuj obrazy o wysokiej jakości, odpowiednio zoptymalizowane pod kątem wydajności.