Rasmlar galereyasi
CSS yordamida moslashuvchan rasmlar galereyasini yaratishni o‘rganing.
Rasmlar galereyasi
Moslashuvchanlik effektini ko‘rish uchun brauzer oynasi o‘lchamini o‘zgartiring:
Add a description of the image here
Add a description of the image here
Add a description of the image here
Add a description of the image here
Rasmlar galereyasini yaratish
1-qadam) HTML qo‘shing:
Misol
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque Terre">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="clearfix"></div>
2-qadam) CSS qo‘shing:
Bu misolda turli ekran o‘lchamlarida rasmlarni qayta joylashtirish uchun media so‘rovlardan foydalaniladi: kengligi 700px dan katta ekranlarda to‘rtta rasm yonma-yon, 700px dan kichik ekranlarda esa ikkita rasm yonma-yon ko‘rsatiladi. 500px dan kichik ekranlarda rasmlar vertikal ravishda ustma-ust joylashadi (100%):
Misol
div.gallery {
border: 1px solid #ccc;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
O‘zingiz sinab ko‘ring »
Maslahat: Rasmlar haqida ko‘proq bilish uchun HTML rasmlar darsligimizga o‘ting.
Maslahat: Rasmlarga qanday uslub berish haqida ko‘proq bilish uchun CSS’da rasmlarga uslub berish darsligimizga o‘ting.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!