cssda sezuvchan rasm qo'yish

DOCX 4 sahifa 22,1 KB Bepul yuklash

4 sahifa

FaylHub.uz

Telegram orqali yuklab olish

Hajm 22,1 KB

Fayl turi DOCX

Sahifalar 4

Yangilangan Dek 2025

Sahifa ko'rinishi (4 sahifa)

Pastga aylantiring 👇

1 / 4

22-mavzu: cssda sezuvchan rasm qo'yish. reja. 1. cssda harakatlanuvchi rasm yaratish 2. qanday oʻlchovlarda foydalanamiz? 3. nisbiy yoki aniq? bugungi kundagi saytlarning katta qismi harakatlanuvchi websaytlar boʻlib ularda rasmlarni markazlashtirish yoki tekislash uchun avval cssda qimirlovchi yoki harakatlanuvchi rasm yaratishni oʻrganish kerak. rasmni harakatlanadigan yoki qimirlaydigan qilish aslida juda oson. saytga rasm yuklash vaqtida uni oʻz maʼlum kenglik va uzunligi boʻladi. ularni ikkovini ham cssda oʻzgartirish mumkin. buning uchun rasmni kenglik xususiyatiga yangi oʻlchov belgilanadi va uzunlik oʻzini avtomatik ravishda bunga moslab oladi. eng muhimi, kenglik xususiyatiga aniq oʻlchamlar ya'ni piksellarni emas, foiz kabi nisbiy oʻlchamlardan qoʻllash kerak. img { width: 500px; } masalan agar css orqali img ga width:500px bersangiz quyidagicha ko'rinish oladi va o'z moslashuvchanligini yo'qotadi misol uchun, agar rasm uchun kenglikni 500px deb qoʻysangiz, bu oʻlchov aniq boʻlgani tufayli qoʻyilgan rasm qimirlovchi boʻlmaydi. img{ width: 50%; } agar aksincha o'lchovni % dan bersangiz quyidagicha har qanday ekran …

2 / 4

mg { width: 100% } } nima uchun maks-kenglik xususiyati unchalik qoniqarli emas? programmistlar harakatlanuvchi rasm yaratish uchun qoʻllaydigan yana bir usul bu maksimum-kenglik xususiyati. boshqalarga qaraganda bu unchalik foydali usul boʻlmasligi mumkin chunki bu turli kattalikdagi ekranlar va qurilmalarga birdek tushmaslik ehtimoli bor. misollar bilan tushuntirishdan avval maks-kenglik nima qilishini oʻrganib olaylik. maks-kenglik xususiyati elementga maksimum qiymat qoʻyadi. bu esa kenglikni qoʻyilgan maksimum qiymatdan kattalashishiga yoʻl qoʻymaydi (lekin u kichrayishi mumkin). masalan, agar rasmni oʻz kengligi 500px boʻlsa va sizni ekran oʻlchami faqat 360px ni koʻtarsa, siz bu rasmni ocha olmaysiz chunki sizda yetarli joy yoʻq: img { max-width: 100%; width: 500px; // assume this is the default size } shuning uchun rasmga maks-kenglik xususiyati qoʻllanilib uni 100% qilib belgilanadi va u 500px rasmni 360px joyga kichraytirib sigʻdiradi. shu usul orqali toʻliq rasmni kichikroq ekranda ham koʻrish imkoniyatiga ega boʻlasiz. yaxshi tomoni shuki, nisbiy qiymat qoʻllanilgani uchun, rasm 500px …

3 / 4

mki cssda buni toʻgʻrilash uchun yana bir xususiyat bor... yechim: obyekt-moslash xususiyati rasmlarni koʻproq nazorat qila olishingiz uchun css yana bir obyekt-moslash xususiyati bilan taminlaydi. img { width: 100%; height: 300px; object-fit: cover; object-position: bottom; } kerak boʻlgan hollarda obyekt-pozitsiyalash xususiyatini rasmni aniq bir joylariga eʼtibor berish uchun ham qoʻllashingiz mumkin(obyekt-moslash ga qoʻshimcha sifatida). koʻp programmistlar obyekt-moslash xususiyatini toʻliq bilmasligi mumkin lekin bu kabi muammolarni yechishda u juda qoʻl keladi.

4 / 4

Ko'proq o'qimoqchimisiz?

Barcha 4 sahifani Telegram orqali bepul yuklab oling.

To'liq faylni yuklab olish

"cssda sezuvchan rasm qo'yish" haqida

22-mavzu: cssda sezuvchan rasm qo'yish. reja. 1. cssda harakatlanuvchi rasm yaratish 2. qanday oʻlchovlarda foydalanamiz? 3. nisbiy yoki aniq? bugungi kundagi saytlarning katta qismi harakatlanuvchi websaytlar boʻlib ularda rasmlarni markazlashtirish yoki tekislash uchun avval cssda qimirlovchi yoki harakatlanuvchi rasm yaratishni oʻrganish kerak. rasmni harakatlanadigan yoki qimirlaydigan qilish aslida juda oson. saytga rasm yuklash vaqtida uni oʻz maʼlum kenglik va uzunligi boʻladi. ularni ikkovini ham cssda oʻzgartirish mumkin. buning uchun rasmni kenglik xususiyatiga yangi oʻlchov belgilanadi va uzunlik oʻzini avtomatik ravishda bunga moslab oladi. eng muhimi, kenglik xususiyatiga aniq oʻlchamlar ya'ni piksellarni emas, foiz kabi nisbiy oʻlchamlardan qoʻllash kerak. img { width: 500px;...

Bu fayl DOCX formatida 4 sahifadan iborat (22,1 KB). "cssda sezuvchan rasm qo'yish"ni yuklab olish uchun chap tomondagi Telegram tugmasini bosing.

Teglar: cssda sezuvchan rasm qo'yish DOCX 4 sahifa Bepul yuklash Telegram