CSS rasmlar galereyasi

CSS rasm galereyasi

CSS rasm galereyasi — veb-sahifada tashkil etilgan va ko‘pincha moslashuvchan tarzda ko‘rsatiladigan rasmlar to‘plami.

Bu yerda rasm galereyasi yaratish uchun CSS’dan foydalanamiz:

Cinque Terre

Green Forest

Northern Lights

Mountains

Rasm galereyasi uchun HTML strukturasi quyidagicha:

Butun galereyani o‘raydigan konteyner element (masalan class="gallery" li <div>).
Har bir rasm uchun yana bitta konteyner element (masalan class="gallery-item" li <div>), u <img> tegini va ehtimol tavsifni o‘z ichiga oladi.

Mana HTML va CSS kodi:

Misol

<html>
<head>
<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>

<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>

O‘zingiz sinab ko‘ring »

Maslahat: Yuqoridagi rasm galereyasi uchun display: flex; dan foydalandik. Bu maket moduli rasmlarni qatorlar yoki ustunlarda joylashtirishda samaralidir. CSS Flexbox haqida keyinchalik CSS darsligimizda ko‘proq bilib olasiz.

CSS moslashuvchan rasm galereyasi

Bu yerda biz rasmlarni turli ekran o‘lchamlariga moslab qayta joylashtirish uchun CSS media so‘rovlaridan foydalanamiz:

Agar ekran kengligi 768px dan katta bo‘lsa - to‘rtta rasmni yonma-yon ko‘rsatish
Agar ekran 768px dan kichik bo‘lsa - ikkita rasmni yonma-yon ko‘rsatish
Agar ekran 480px dan kichik bo‘lsa — rasmlarni vertikal taxlang (width: 100%)

Maslahat: Siz media so‘rovlar haqida keyinroq CSS darsligimizda batafsil bilib olasiz.

Misol

O‘zingiz sinab ko‘ring »

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish