cssda sezuvchan rasm qo'yish

DOCX 4 стр. 22,1 КБ Бесплатная загрузка

Предварительный просмотр (4 стр.)

Прокрутите вниз 👇
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
cssda sezuvchan rasm qo'yish - Page 4

Хотите читать дальше?

Скачайте все 4 страниц бесплатно через Telegram.

Скачать полный файл

О "cssda sezuvchan rasm qo'yish"

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

Этот файл содержит 4 стр. в формате DOCX (22,1 КБ). Чтобы скачать "cssda sezuvchan rasm qo'yish", нажмите кнопку Telegram слева.

Теги: cssda sezuvchan rasm qo'yish DOCX 4 стр. Бесплатная загрузка Telegram