1-maqolaning davomi…

Moslashuvchan rasmlar
Moslashuvchan dizaynlar bilan ishlayotganda kelib chiqadigan eng asosiy muammolardan biri bu rasmlar bilan ishlashdir. Rasm o’lchamini proporsional(har tomonini teng) o’zgartirish uchun ko’plab usullar bor va ba’zilar judayam oson.

1-yechim: CSS media so’rvlar yordamida.
Bu keng tarqalgan usul bo'lib, CSS max-width atributi orqali amalga oshirishdir.

img { max-width: 100%; }

Agar rasm turgan soha rasm original kengligidan kichik bo’lmasa, har bir yuklangan rasm o’zining to’liq o’lchamida aks etadi. Rasm maksimal kengligi ekran yoki brovzerga 100% ga o’rnatiladi. Yuqoridagi misolni ko’rsak agar, rasm har qanday monitorda brovzerga to’liq bo’lib chiqadi, hech qanday scroll chiqmayd. Agar, max-width xususiyatini olib tashlasak, unda rasm kichikroq ekranlarda scroll bilan chiqadi, ya’ni o’z o’lchamini o’zgartirmaydi. Bu yerda moslashuvchan rasmlarda turgan asosiy g’oya rasmlarni joylashgan joyiga nisbatan maksimal razmerda chiqarish. Siz rasmni eni va balandligini bermaysiz, aksincha brovzer CSS yordamida uning nisbiy o’lchamiga qaratilgan kerakli o’lchamga keltirib oladi. max-width Internet Explorer eski versiyalarida ishlamaydi, lekin width: 100% usulini qo’llash mumkin.

Biz bilamizki, css da background orqali qo’yilgan rasmni o’lchamini o’zgartira olmaymiz. Lekin CSS3 bu imkoniyatni yaratib berdi. background-size atributi orqali rasm foni o’lchamini sozlashimiz mumkin(Bu yerda rasm hajmi o’zgarmaydi, shunchaki o’lchamlari o’zgaradi)

background-size: contain;

Ushbu css so’rov, orqa fonga qo’yilgan rasmni obyekt bo’yicha moslashtirib beradi. Masalan, fon rasmi 300x400 bo’lsa, va fon qo’yilgan obyekt 200x300 bo’lsa, fon rasmi kichiklashib shu elementga mos holda chiqadi.

Yuqoridagi usul oson va qulay bo’lgani bilan bir qatorda, biz rasm hajmi va yuklanish vaqtini hisobga olishimiz kerak. Katta rasmlar joylashgan sahifalarni telefonda ochganimizda, rasmlar ekrangan osongina moslashib oladi, lekin rasm hajmi o’zgarmaydi va bu rasm yuklanish vaqtini sekinlashishi va behuda joy egallashiga olib keladi.

Quidagi linkda ushbu usullar ko'rsatilgan.

Agar ushbu sahifani mobil telefonda ochsak:


2-yechim: JavaScript va Server tomonidan rasmlarni o’zgartirish.
Agar yuklanayotgan rasmni hajmini ham hisobga olmoqchi bo’lsangiz, rasmlarni server qismida foydalanuvchi ekran o’lchamiga mos holda o’lchamini o’zgaritirb olishingiz zarur. “Adaptive Images” deb nomlangan PHP da yaratilgan plugin bor. Ushbu plugin saytga tashrif buyuruvchini ekrani o’lchamini aniqlaydi va avtomatik rasmlarning siqilgan versiyasini keshda saqlaydi va web-sahifaga yetkazib beradi. Quidagi link orqali ushbu plugin haqida o’rganib chiqishingiz mumkin.
Ya'ni, agar rasm o'lchami 1024x700(100kb) bo'lsin deylik, va sahifani kichik ekranli qurilmada ochsak shu ekranga mos bo'lgan o'lchamdagi(bunda hajmi ham kichiklashtiriladi) rasm, masalan 200x100 bo'lib keladi.

3-yechim: JavaScript va Server tomonidan rasmlarni o’zgartirish(3-tomon orqali)
Agar yuqoridagi usulni o’rnatishga erinsangiz, unda 3-tomon orqali, ya’ni src.sencha.io taqdim qiladigan rasm o’lchamlarini o’zgartirib berish xizmatidan foydalanish mumkin. Bunday plugin va kutubhonalarni internetdan ko’plab topish mumkin. Shunchaki Responsive Image Solutions deb qidirsangiz google minglab natijalar chiqarib beradi.