Vytvorenie responzívnej galérie obrázkov

Úvod

V tomto článku sa naučíš, ako vytvoriť jednoduchý galériový blok obrázkov pomocou HTML a CSS. Galéria je ideálna na prezentáciu portfólia, produktov alebo fotografií a môže byť responzívna pre rôzne zariadenia.

1. HTML galéria

 <div class="container"> <div class="box"><img src="obrazok1.jpg" alt="Obrázok 1"></div> <div class="box"><img src="obrazok2.jpg" alt="Obrázok 2"></div> <div class="box"><img src="obrazok3.jpg" alt="Obrázok 3"></div> <div class="box"><img src="obrazok4.jpg" alt="Obrázok 4"></div> </div> 

2. CSS štýly

 .container { display: flex; flex-wrap: wrap; gap: 10px; }

.box {
flex: 1 1 200px;
background-color: #f0f0f0;
padding: 5px;
text-align: center;
}

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

@media (max-width: 768px) {
.container {
flex-direction: column;
}
}

Záver

Táto jednoduchá galéria ti umožní elegantne prezentovať obrázky na tvojej webstránke. Môžeš pridať ďalšie efekty, ako napríklad hover animácie alebo svetelné okno pri kliknutí na obrázok.