Galerie de Imagini CSS
Când o pagină web arată o colecție de imagini într-un mod organizat, și adesea responsiv, aceasta este o galerie de imagini CSS.
HTML-ul ei are două niveluri:
- Un element container exterior care încadrează întreaga galerie (precum un
<div>folosit ca înveliș pentru galerie). - În interiorul lui, încă un element container pentru fiecare imagine (precum un
<div>pentru fiecare element al galeriei), care conține eticheta<img>și, eventual, o descriere.
Exemplu
O galerie de imagini de bază construită cu flexbox, în HTML și CSS:
Prompt
Creați o galerie de imagini CSS folosind flexbox. Containerul galeriei (div.gallery) folosește display: flex și flex-wrap: wrap cu justify-content: flex-start. Fiecare element al galeriei (div.gallery-item) are margin 5px, border 1px solid #ccc și width 180px. La hover, bordura se schimbă la 1px solid #777. Imaginile din interiorul elementelor galeriei au width 100% și height auto. Div-ul de descriere (div.desc) are padding 15px și text-align center. Includeți patru imagini: Cinque Terre (img_5terre.jpg), Forest (img_forest.jpg), Northern Lights (img_lights.jpg) și Mountains (img_mountains.jpg). Fiecare imagine este încadrată într-o etichetă ancoră cu target="_blank" și are atributele width="600" height="400". Adăugați un text de descriere sub fiecare imagine.
Output: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Image Gallery</title>
<style>
div.gallery {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
div.gallery-item {
margin: 5px;
border: 1px solid #ccc;
width: 180px;
}
div.gallery-item:hover {
border: 1px solid #777;
}
div.gallery-item img {
width: 100%;
height: auto;
}
div.gallery-item div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<h2>Image Gallery</h2>
<div class="gallery">
<div class="gallery-item">
<a target="_blank" href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Cinque Terre</div>
</div>
<div class="gallery-item">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Green Forest</div>
</div>
<div class="gallery-item">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Northern Lights</div>
</div>
<div class="gallery-item">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Mountains</div>
</div>
</div>
</body>
</html>
Galerie de Imagini CSS Responsivă
Cu media queries CSS, imaginile se rearanjează în funcție de dimensiunea ecranului:
- Pe ecrane mai late de 768px - patru imagini apar una lângă alta
- Pe ecrane mai înguste de 768px - două imagini apar una lângă alta
- Pe ecrane mai înguste de 480px - imaginile se stivuiesc vertical (width: 100%)
Exemplu
Prompt
Creați o galerie de imagini CSS responsivă folosind flexbox și media queries. Containerul galeriei (div.gallery) folosește display: flex și flex-wrap: wrap cu justify-content: flex-start. Fiecare element al galeriei (div.gallery-item) are margin 5px, border 1px solid #ccc și folosește lățimi procentuale care se schimbă în funcție de dimensiunea ecranului. La hover, bordura se schimbă la 1px solid #777. Imaginile din interiorul elementelor galeriei au width 100% și height auto. Div-ul de descriere (div.desc) are padding 15px și text-align center. Folosiți media queries astfel încât: dacă ecranul este mai lat de 768px, afișați patru imagini una lângă alta (fiecare element aproximativ 24%); dacă ecranul este mai îngust de 768px, afișați două imagini una lângă alta (fiecare element aproximativ 48%); dacă ecranul este mai îngust de 480px, stivuiți imaginile vertical (fiecare element cu lățime 100%). Includeți patru imagini: Cinque Terre (img_5terre.jpg), Forest (img_forest.jpg), Northern Lights (img_lights.jpg) și Mountains (img_mountains.jpg). Fiecare imagine este încadrată într-o etichetă ancoră cu target="_blank" și are atributele width="600" height="400".
Output: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive CSS Image Gallery</title>
<style>
div.gallery {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
div.gallery-item {
margin: 5px;
border: 1px solid #ccc;
width: 24%;
}
div.gallery-item:hover {
border: 1px solid #777;
}
div.gallery-item img {
width: 100%;
height: auto;
}
div.gallery-item div.desc {
padding: 15px;
text-align: center;
}
@media screen and (max-width: 768px) {
div.gallery-item {
width: 48%;
}
}
@media screen and (max-width: 480px) {
div.gallery-item {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Responsive Image Gallery</h2>
<h4>Resize the browser window to see the effect!</h4>
<div class="gallery">
<div class="gallery-item">
<a target="_blank" href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Cinque Terre</div>
</div>
<div class="gallery-item">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Green Forest</div>
</div>
<div class="gallery-item">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Northern Lights</div>
</div>
<div class="gallery-item">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Mountains</div>
</div>
</div>
<p>Here we use media queries to re-arrange the images on different screen sizes:</p>
<ul>
<li>If screen is larger than 768px wide - show four images side by side</li>
<li>If screen is smaller than 768px - show two images side by side</li>
<li>If screens is smaller than 480px - stack the images vertically (100%)</li>
</ul>
<p><strong>Tip:</strong> You will learn more about media queries later in our CSS Tutorial.</p>
</body>
</html>