Jak zrobić zdjęcia obok siebie w HTML?

Aby umieścić zdjęcia obok siebie w HTML, można wykorzystać kilka technologii: czysty HTML, CSS (różne metody), a także możliwości układów responsywnych. Poniżej znajdziesz poradnik krok po kroku, obejmujący zarówno rozwiązania najprostsze, jak i bardziej zaawansowane, z praktycznymi przykładami i gotowymi fragmentami kodu.

Najprostszy sposób: Kilka znaczników <img> jeden po drugim

Wstawienie zdjęć obok siebie bez dodatkowych stylów możliwe jest przez wpisanie kilku znaczników <img> bez przerwy:

<img src="zdjecie1.jpg" alt="Zdjęcie 1" width="200">
<img src="zdjecie2.jpg" alt="Zdjęcie 2" width="200">
<img src="zdjecie3.jpg" alt="Zdjęcie 3" width="200">

Uwaga – w powyższym przypadku między obrazkami pojawią się domyślne odstępy (spacje), ponieważ elementy te są traktowane jako inline. Jeśli odstępy przeszkadzają, należy je usunąć z kodu źródłowego (nie wstawiać spacji między tagami) lub zastosować rozwiązania CSS.

Ustawianie zdjęć obok siebie za pomocą CSS

Właściwość float

Pozwala ustawić obrazy w linii poziomej. Przykład:

<style>
.img-float { float: left; margin-right: 10px; }
.clearfix::after { content: ""; display: block; clear: both; }
</style>
<div class="clearfix">
  <img src="zdjecie1.jpg" class="img-float" alt="Zdjęcie 1" width="200">
  <img src="zdjecie2.jpg" class="img-float" alt="Zdjęcie 2" width="200">
  <img src="zdjecie3.jpg" class="img-float" alt="Zdjęcie 3" width="200">
</div>

• float: left – powoduje ustawienie zdjęć w jednej linii;
• margin-right – dba o odstęp między nimi;
• clearfix – zabezpiecza układ przed „wylewaniem się” kontenera poza elementy pływające.

Flexbox – elastyczny i nowoczesny

Flexbox to najbardziej zalecana obecnie metoda na ustawienie elementów w linii oraz tworzenie responsywnych układów.

<style>
.flex-row { display: flex; gap: 20px; /* odstęp między zdjęciami */ }
.flex-row img { width: 200px; height: auto; }
</style>
<div class="flex-row">
  <img src="zdjecie1.jpg" alt="Zdjęcie 1">
  <img src="zdjecie2.jpg" alt="Zdjęcie 2">
  <img src="zdjecie3.jpg" alt="Zdjęcie 3">
</div>

• display: flex – ustawia wszystkie dzieci kontenera w jednej linii;
• gap – definiuje odstęp między obrazkami, bez konieczności dodawania marginesów.

CSS Grid – układy bardziej zaawansowane

CSS Grid pozwala na bardziej skomplikowane układy, np. kilka zdjęć w rzędzie oraz automatyczne przechodzenie do kolejnych wierszy, jeśli ich zbyt dużo.

<style>
.grid-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-row img { width: 100%; height: auto; display: block; }
</style>
<div class="grid-row">
  <img src="zdjecie1.jpg" alt="Zdjęcie 1">
  <img src="zdjecie2.jpg" alt="Zdjęcie 2">
  <img src="zdjecie3.jpg" alt="Zdjęcie 3">
</div>

Można dowolnie zmieniać liczbę kolumn – repeat(3, 1fr) oznacza trzy zdjęcia w rzędzie.

Zdjęcia jako klikalne linki

Często zdjęcia mają być linkami do większych wersji lub innych stron. Wtedy każde zdjęcie umieszczamy wewnątrz znacznika <a>.

<div class="flex-row">
  <a href="zdjecie1-duze.jpg"><img src="zdjecie1.jpg" alt="Zdjęcie 1"></a>
  <a href="zdjecie2-duze.jpg"><img src="zdjecie2.jpg" alt="Zdjęcie 2"></a>
  <a href="zdjecie3-duze.jpg"><img src="zdjecie3.jpg" alt="Zdjęcie 3"></a>
</div>

Układ RWD (responsive web design) – zdjęcia dostosowujące się do ekranu

Aby zdjęcia były responsywne (dobrze wyglądały na urządzeniach mobilnych):

<style>
.flex-row { display: flex; flex-wrap: wrap; gap: 10px; }
.flex-row img { width: 100%; max-width: 200px; height: auto; box-sizing: border-box; }
@media (max-width: 600px) {
  .flex-row { flex-direction: column; align-items: center; }
  .flex-row img { max-width: 90vw; }
}
</style>
<div class="flex-row">
  <img src="zdjecie1.jpg" alt="Zdjęcie 1">
  <img src="zdjecie2.jpg" alt="Zdjęcie 2">
  <img src="zdjecie3.jpg" alt="Zdjęcie 3">
</div>

Tutaj zdjęcia przestawią się jedno pod drugim na wąskich ekranach.

Częste błędy i praktyczne wskazówki

• Odstępy (spacje) pojawiające się między zdjęciami – stosując Flexbox lub Grid, nie musisz się nimi martwić;
• Brak dostosowania do urządzeń mobilnych – zawsze używaj szerokości względnych (width: 100%, max-width) zamiast stałych szerokości w pikselach;
• Dodawaj atrybuty alt – pomagają w dostępności i SEO.

Podsumowanie – kiedy którą metodę wybrać?

Stosując powyższe techniki, z łatwością uzyskasz zdjęcia obok siebie w HTML, zarówno dla prostych prezentacji, jak i zaawansowanych galerii zdjęć oraz układów responsywnych.