Vytvorenie responzívnej galérie obrázkov

Úvod

Galéria obrázkov je častým prvkom webstránok. Ukážeme si, ako vytvoriť jednoduchú a responzívnu galériu.

1. HTML štruktúra galérie

 <div class="galeria"> <img src="img1.jpg" alt="Obrázok 1"> <img src="img2.jpg" alt="Obrázok 2"> <img src="img3.jpg" alt="Obrázok 3"> <img src="img4.jpg" alt="Obrázok 4"> </div> 

2. CSS štýly galérie

 .galeria { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.galeria img {
width: 200px;
border-radius: 8px;
}

@media (max-width: 768px) {
.galeria {
flex-direction: column;
align-items: center;
}
.galeria img {
width: 80%;
margin-bottom: 10px;
}
}

Záver

Táto galéria sa automaticky prispôsobuje veľkosti obrazovky, čo zaručuje dobrý vzhľad na desktopoch aj mobiloch.