RWD rasmlar

Rasmning sahifaga sig‘ish uchun qanday masshtablanishini ko‘rish uchun brauzer oynasining o‘lchamini o‘zgartiring.

width xossasidan foydalanish

Agar width xossasi foizda va height xossasi "auto" qilib belgilansa, rasm moslashuvchan bo‘ladi va yuqori-past masshtablanadi:

Misol

img {
width: 100%;
height: auto;
}

O‘zingiz sinab ko‘ring »

E’tibor bering: yuqoridagi misolda rasm asl o‘lchamidan kattaroq qilib cho‘zilishi mumkin. Ko‘p hollarda buning o‘rniga max-width xususiyatidan foydalanish yaxshiroq yechim bo‘ladi.

max-width xususiyatidan foydalanish

Agar max-width xususiyati 100% qilib belgilansa, rasm zarur bo‘lsa kichrayadi, lekin hech qachon asl o‘lchamidan kattalashmaydi:

Misol

img {
max-width: 100%;
height: auto;
}

O‘zingiz sinab ko‘ring »

Misol veb-sahifaga rasm qo‘shish

Misol

img {
width: 100%;
height: auto;
}

O‘zingiz sinab ko‘ring »

Fon rasmlari

Fon rasmlari ham o‘lcham o‘zgartirish va masshtablashga javob berishi mumkin.

Bu yerda uchta turli usulni ko‘rsatamiz:

1. background-size: contain; dan foydalanish: Fon rasmi yuqori-past masshtablanadi va kontent maydoniga sig‘ishga harakat qiladi. Biroq rasm o‘z nisbatlarini (rasm kengligi va balandligi o‘rtasidagi mutanosiblikni) saqlaydi:

Misol

background-size: contain; dan foydalanish:

div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid black;
}

O‘zingiz sinab ko‘ring »

2. background-size: 100% 100%; dan foydalanish: Fon rasmi butun kontent maydonini qoplash uchun cho‘ziladi:

Misol

background-size: 100% 100%; dan foydalanish:

div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid black;
}

O‘zingiz sinab ko‘ring »

3. background-size: cover; dan foydalanish: Fon rasmi butun kontent maydonini qoplash uchun masshtablanadi. "cover" qiymati nisbatlarni saqlaydi va fon rasmining ba’zi qismlari kesilishi mumkinligiga e’tibor bering:

Misol

background-size: cover; dan foydalanish:

div {
  width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
  background-size: cover;
  border: 1px solid black;
}

O‘zingiz sinab ko‘ring »

Turli qurilmalar uchun turli rasmlar

Katta rasm katta kompyuter ekranida mukammal bo‘lishi mumkin, lekin kichik qurilmada foydasiz. Baribir uni kichraytirish kerak bo‘lsa, nima uchun katta rasmni yuklashingiz kerak? Yuklamani kamaytirish yoki boshqa sabablarga ko‘ra, turli qurilmalarda turli rasmlarni ko‘rsatish uchun media so‘rovlaridan foydalanishingiz mumkin.

Misol

/* For width smaller than 400px: */
body {
background-image: url('img_smallflower.jpg');
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}

O‘zingiz sinab ko‘ring »

HTML <picture> elementi

HTML <picture> elementi veb-dasturchilarga rasm resurslarini belgilashda ko‘proq moslashuvchanlik beradi.

<picture> elementining eng keng tarqalgan qo‘llanilishi — moslashuvchan dizaynlarda ishlatiladigan rasmlar uchundir. Viewport kengligiga qarab kichraytiriladigan yoki kattalashtiriladigan bitta rasm o‘rniga, brauzer viewport’ini yaxshiroq to‘ldirish uchun bir nechta rasm loyihalashtirilishi mumkin.

<picture> elementi <video> va <audio> elementlariga o‘xshab ishlaydi. Turli manbalar sozlaysiz va afzalliklarga mos keladigan birinchi manba ishlatiladi:

Misol

O‘zingiz sinab ko‘ring »

srcset atributi majburiy bo‘lib, rasm manbasini belgilaydi.

media atributi ixtiyoriy bo‘lib, CSS @media qoidasida uchraydigan media so‘rovlarni qabul qiladi.

<picture> elementini qo‘llab-quvvatlamaydigan brauzerlar uchun <img> elementini ham belgilashingiz kerak.

Moslashuvchan rasm galereyasi

Bu yerda biz moslashuvchan rasm galereyasi yaratish uchun media so‘rovlar va flexbox’ni birga ishlatamiz:

Misol

O‘zingiz sinab ko‘ring »

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish