Ko'rsatiladigan rasmlarning o'lchamlari: 13 qadam

2024 Muallif: John Day | [email protected]. Oxirgi o'zgartirilgan: 2024-01-30 13:27

Rasmlarni to'g'ri o'lchamda olishda muammolaringiz bormi? Sizning rasmlaringiz kattaligi juda kattami va yuqoridagi kabi ramkadan oshib ketadimi? Bu muammoni hal qilish uchun o'rganganlarimni umumlashtirishga urinishlar.

Menga Instructable Staff tomonidan yuklangan barcha rasmlar turli xil nisbatlarda takrorlanishi aytilgan. Bu tasvirlar havzasi, siz qaysi qurilmadan ko'rsatma berayotganingizga qarab, har xil o'lchamda olinadi. Oddiy muharrirda qanday hajm va nisbat ko'rsatilishini ko'rsatishning iloji yo'q.

Keyin ular taklif qilishdi: "Agar siz rasmlarni an'anaviy nisbati bilan yuklasangiz, boshqa variant bo'lishi mumkin. 16: 9dan 4: 3gacha bo'lgan har bir narsa juda yaxshi ko'rsatilishi kerak".

E'tibor bering, ular bu "mumkin" deb aytishadi. Mana, rasmlarimni munosib tarzda namoyish etish uchun olib borgan kurashlarimdan topdim. (E'tibor bering, men "Rubik kupligini osonlashtirdim" dan rasmlardan foydalanaman, shuning uchun hammasi kub tasvirlar!)

Yuqoridagi rasm o'zining asl o'lchamlari (600x195) bo'lib, u an'anaviy nisbatlar diapazonida emas. Ko'rib turganingizdek, Instructables bu tasvirni chap va o'ng tomonlari kesilgan holda juda katta qilib ko'rsatmoqda. Keling, bu tasvirni to'g'ri ko'rsatish uchun nima qilishimiz kerakligini ko'rib chiqaylik.

1 -qadam: 16: 9 nisbatlarini sinab ko'raylik

Keling, 16: 9 (kenglik: balandlik) nisbatlarini sinab ko'ramiz. Men asl kengligi 600 pikselni saqlayman, 16: 9 balandligi 338 piksel bo'lishi kerak, shuning uchun biz 600x338 o'lchamdagi tuval yasaymiz va unga 600x195 tasvirni tashlaymiz.

Keling, bu 600x338 (16: 9 nisbatli) tasvir qanday ko'rinishini ko'rib chiqaylik. Qizig'i shundaki, men bu rasmni qo'yib, oldindan ko'rib chiqsam, u juda mos edi - chap va o'ng qirralari kesilmagan! Men buni isbotlash uchun skrinshot oldim, keyingi slaydda ko'ring.

Lekin men buni brauzerimda (Chrome) ko'rsam, yuqoridagi rasmda ko'rib turganimdek, o'ng va chap tomonlar yana kesilgan! Shunday qilib, ushbu tajribadan ko'rinib turibdiki, 16: 9 nisbatiga o'zgartirish bizning muammolarimizni hal qilmaydi!

Yon eslatma sifatida, 16: 9 - bu "keng ekran" deb nomlanuvchi "yangi" umumiy nisbatlar, 4: 3 - eski maktabning "to'liq ekrani", televizor kunlarida keng tarqalgan edi. Ha, siz ming yillikdasiz, ehtimol men nima demoqchi ekanimni bilmayapsiz.

2 -qadam: 16: 9 Rasm oldindan ko'rilganidek yangi yuklangan

Bu rasm - bu 16: 9 tasvirimiz oldindan ko'rishda mukammal ko'rinishini ko'rsatadigan ekran tasviridir. Muvaffaqiyat, to'g'rimi? Xo'sh, unchalik tez emas - biz bu sahifani brauzerimizda (Chrome) ko'rganimizda nima bo'lishini ko'ring! Chap va o'ng qirralar yana kesiladi! Oldingi slaydga ruxsat berish uchun orqaga qayting va o'zingiz ko'ring.

Olingan dars - oldindan ko'rishga ishonmang! Ko'rib chiqishda yaxshi ko'rinadigan narsa brauzer yordamida haqiqiy ko'rishda boshqacha ko'rinishga ega bo'ladi!

Bundan tashqari, ha, mening rasmim ostida juda ko'p bo'sh joy bor. Buning sababi shundaki, men 600x195 o'lchamdagi rasmni 600x338 o'lchamdagi tuvalga tashladim va uni tepaga qo'ydim, shuning uchun pastda bo'sh joy bor. Bu haqda nima qila olamiz? Xo'sh … biz buni keyingi slaydda hal qilishga harakat qilamiz.

Keling, bu tasvirni qanday qilib to'liq ko'rsatish mumkinligini ko'rishni davom ettiramiz.

3 -qadam: 16: 9 L&R tomonlari kesilgan holda ko'rsatiladi

Agar biron sababga ko'ra sizning brauzeringiz 16: 9 tasvirlarini mukammal ko'rsatsa, men bu haqda gapirayapman. Bu erda men birinchi ko'rishdan keyin "joylashish" dan keyin ko'rsatiladigan 1 -qadamdagi 16: 9 rasmimni qanday ko'rayotganimni skrinshotini ko'rdim - chap va o'ng kesilganiga e'tibor bering.

Agar siz mening 1 -qadam tasvirimni mukammal tarzda ko'rayotgan bo'lsangiz, juda yaxshi. Menga xabar bering! Lekin men buni shunday ko'ryapman. Ha, bu sarlavha sahifasidagi asl rasmdan ancha yaxshi, lekin baribir kesilgan. Men uchun, Instructables xodimlarining tavsiyalariga qaramay, 16: 9 nisbati uni umuman kamaytirmaydi. Keling, 4: 3 nisbatiga o'tamiz.

4 -qadam: Keling, 4: 3 nisbatlarini sinab ko'ramiz

Keling, 4: 3 nisbatlarini sinab ko'ramiz. Men asl kengligi 600 pikselni saqlayman, 4: 3 balandligi 450 piksel bo'lishi kerak, shuning uchun biz 600x450 o'lchamdagi tuval yasaymiz va unga 600x195 tasvirni tashlaymiz.

Bu 600x450 (4: 3 nisbatli) tasvir qanday ko'rinadi?

Shunga qaramay, men uni birinchi marta tashlaganimda, rasm ajoyib ko'rinadi (pastdagi barcha bo'sh joylardan tashqari). Chap va O'ng yaxshi ko'rsatiladi. Brauzerda qarasak, O'ng va Chap yaxshi ko'rinishda davom etayotganga o'xshaydi.

Yuqorida ta'kidlab o'tilganidek, tasvir ostidagi bo'sh joy, chunki men 600x195 o'lchamdagi rasmimni 600x450 o'lchamdagi tuvalga tashladim va uni tepaga qo'ydim.

Olingan dars - O'ng va chap tomonlar kesilmasligi uchun 4: 3 nisbat nisbati talab qilinadi. Afsuski, bu qisqa va keng tasvirlar uchun juda ko'p bo'sh joy bo'ladi degan ma'noni anglatadi, chunki siz bu rasmlarni 4: 3 o'lchamli tuvalga tashlashingiz kerak bo'ladi. Ha, siz o'zingizning rasmingizni markazlashtirishingiz mumkin, shunda tepada va pastda teng bo'sh joy bo'ladi, lekin nima bo'lishidan qat'i nazar, sizning rasmingizning tepasida yoki ostida ko'p bo'sh joy bo'ladi, lekin men bilganimdek, bu sizning murosangiz. Rasmlaringiz buzilmasligi uchun Instructables -ga kirishingiz kerak.

5 -qadam: 4: 3 Rasm markazlashtirilgan

Mana o'sha 600x195 o'lchamdagi rasm 600x450 o'lchamdagi tuvalga tushirilgan, lekin markazlashtirilgan bo'lib, tepada va pastda teng bo'sh bo'sh joy bo'ladi. Biroz yaxshiroq ko'rinadi, matn tasvirdan unchalik uzoq bo'lmagan ko'rinadi.

6 -qadam: 4: 3 Pastdagi rasm bilan

Va nihoyat, mana o'sha tasvir tushdi va pastga ko'chdi. Endi rasmning tepasida bo'sh tonna bo'sh joy bor. Rasm haqiqatan ham sarlavha satridan ajratilgan, lekin u matnga yaqinroq. Shunday qilib, bu sizning murosalaringiz va olingan saboqlar:

• Ko'rinib turibdiki, 4: 3 - bu ko'rsatmalarni to'liq ko'rsatilishi uchun kerak bo'lgan tomonlar nisbati.
• oldindan ko'rishga ishonmang - bu sizning rasmingizni mukammal ko'rsatishi mumkin, lekin uning qismlari haqiqiy brauzerda kesilishi mumkin

7 -qadam: Minimal kenglik nima?

Keling, minimal kenglik nima bo'lishi kerakligini ko'rib chiqaylik. Ko'rsatilgan rasm 382x206 o'lchamda, 2: 1 ga yaqin, haqiqatan ham ulkan ko'rinadi, shunday emasmi? Shubhasiz, Instructables tasvirni ma'lum bir kenglikka mos kelishi uchun kattalashtirdi, ehtimol 640 piksel, ishonchim komil emas.

Ammo u mos keladi, chunki u ko'proq "kvadrat" - ya'ni balandligi uchun unchalik keng emas. Oh, kutib turing, men yana shu Ko'rib chiqish orqali aldanib qoldim! Bu aslida mos emas - R&L tomonlari yana kesiladi.

Aslida, bu g'alati, faqat oldindan ko'rish buzilgan. Men aslida brauzerda qaradim va dastlab u to'g'ri ko'rsatildi (ya'ni, R&L qirralari kesilmagan). Ammo yana brauzer orqali qarasak, hozir R & L qirralari kesilgan holda tasvir o'lchamlari o'zgartirilmoqda. G'alati

Keling, tasvirni kichikroq qilishga harakat qilaylik. Biz tasvirni 200x108 ga qisqartirib, 2: 1 nisbatlarini saqlaymiz.

8 -qadam: Tasvirni qisqartirish, lekin aspekt nisbatini saqlash

Shunday qilib, men rasmni 200x108 o'lchamiga o'zgartirib, 2: 1 nisbatlarini saqlayman.

Endi bu yana avvaliga mos keladiganga o'xshaydi (piksellar sonini (tasvir sifati) juda yomonlashdi!) Lekin, albatta, siz unga qarayapsiz va u umuman mos kelmaydi va asl nusxadan tashqari asl tasvirga o'xshaydi. yaxshiroq aniqlik. Shunga qaramay, Instructables tasvirni ma'lum bir kenglikga moslashtirish uchun kengaytirmoqda, shuning uchun bu kichikroq (200x108) tasvir juda dahshatli ko'rinadi, bu 382x206 formatidan ancha yomonroq.

Men "ehtimol" deb aytaman, chunki men Instructables bu rasmlarni sizning brauzeringizda qanday ko'rsatishini bilmayman. Har qanday sababga ko'ra, agar men keshimni yangilasam va bu ko'rsatmalarni ko'rib chiqsam, mening rasmlarim o'lchamlari bir xilda ko'rinmaydi, shuning uchun men Instructables nima qilayotganini bilmayman, faqat u mos kelmasligi mumkin. Shunday qilib, ushbu ko'rsatmaning maqsadi - rasmlarni qanday qilib o'lchash kerakligini aniqlash, shuning uchun ular hech bo'lmaganda izchil ko'rsatiladi!

9 -qadam: Tasvirlar dastlab to'g'ri ko'rsatilishini isbotlash

Mana, men rasmni yuklagandan so'ng darhol ko'rdim - bu mos keladi! (E'tibor bering, men ko'rsatmalarni ekran tasvirini to'liq ko'rsatishi uchun yuqoridagi skrinshotni 1600x1200 tasvirga (ya'ni 4: 3 nisbatda) joylashtirishim kerak edi!)

Albatta, siz bilasizki, bu rasmga qarang, er -xotin endi orqaga qaytadi, bu endi mos kelmaydi. Keling, mos bo'lishi uchun minimal kenglik nima bo'lishi kerakligini ko'rib chiqaylik.

10 -qadam: 382x287 (4: 3 nisbat)

Men 382 kengligini saqlab qoldim va 382x286 o'lchamdagi asl rasmni 382x287 o'lchamdagi tuvalga qo'yib, uni 4: 3 nisbatga aylantirdim, chunki biz ilgari Instructable 4: 3 nisbatiga mos keladigan tasvirni to'liq ko'rsatish uchun kerakligini aniqlaganmiz.

Xo'sh, hozir uning ostida juda ko'p bo'sh joy bor. U hech narsaga yaramaydi, lekin u yana ma'lum bir kenglikni to'ldirish uchun kengaytirildi, shuning uchun tasvir aniq emas. Keling, bu mukammal ko'rsatiladigan kenglik nima ekanligini topishga harakat qilaylik.

11 -qadam: Rasmni 300x206 dan 600x206 gacha kengaytirish, u yaxshiroq ko'rinishini ko'rish uchun

Men asl 382x206 (2: 1) tasvirni 600x206 (3: 1) tuvalga tashladim, uni 600 pikselgacha kengaytirish Instructables -ni butun tasvirni ko'rsatishini ko'rsatadimi. Shunga qaramay, dastlab shunday bo'ldi, lekin hozir ko'rib turganingizdek.

Bu haqiqatan ham g'alati narsa - har safar, siz rasmni birinchi marta qo'yganingizda, Instructables bu tasvirning kattaligi va nisbati qanday bo'lishidan qat'i nazar, uni to'g'ri ko'rsatadiganga o'xshaydi. Bu safar men hatto Instructables -dan chiqdim va o'sha varaqni yopib qo'ydim, so'ngra tasvirning to'g'ri ko'rsatilishini tekshirish uchun bu "yangi" ni qayta ko'rib chiqdim. Odatda bu Instructable -ga o'z ishini bajarishi va 4: 3 nisbatda bo'lmagan tasvirlarni o'lchamlarini o'zgartirish va ularni chap va o'ng tomonlari kesilgan holda ko'rsatishni boshlash uchun etarli.

Ajablanarlisi shundaki, men birinchi marta "yangi" ko'rsatmalarni qayta ko'rib chiqdim, bu rasm to'liq ko'rinishda qoldi, lekin, afsuski, men boshqa narsa qilish uchun ketib, taxminan bir soatdan keyin kelganimdan keyin, bu rasm ko'rsatila boshladi. L&R tomonlari kattalashtirildi, xuddi yuqorida ko'rib turganingizdek.

Bu nima uchun yoki qanday sodir bo'ladi? Menda hech qanday tasavvur yo'q. Men nima uchun tasvirni yuklaganidan keyin bir muncha vaqt kutish Instructables -ni boshqacha ko'rsatishiga olib kelishi mumkinligini bilmayman, lekin shunday qiladi. Dalil sifatida men yuqoridagi tasvirni ekran tasvirini birinchi slaydda, keyingi slaydga yuklaganimdan 10-15 minut o'tgach ko'rsataman.

12 -qadam: Rasmlar yuklangandan so'ng to'g'ri ko'rsatilishini isbotlash

Bu yuklashdan so'ng darhol 600x206 tasvirni to'liq ko'rsatadigan ekran tasviridir. Bu oldingi slaydning ekran tasviri. Oldingi slaydga qayting va siz hozir rasm qanchalik jozibali ekanligini ko'rasiz!

E'tibor bering, mening ekran tasvirim aslida 1563x766 o'lchamiga ega edi, lekin men bu ko'rsatmaning boshida o'tkazgan tajribalarimdan bilganimdek, men bilardimki, u 4: 3 tomonlar nisbatiga mos kelmaydi (1563x766 taxminan 4: 2). shunchaki ekran tasvirini asl hajmida yukladi Instructable qirralarini kesib tashlaydi. Men bu tasvirni 4: 3 tuvalga tashladim, shuning uchun skrinshot ostida juda ko'p bo'sh joy bor.

E'tibor bering, skrinshot men 11 -qadam sarlavhasini o'zgartirmagunimcha va bu matnni yozishni tugatmasdan oldin olingan, agar siz bu haqda qiziqsangiz!

O'rganilgan dars - yuklangan rasmni brauzerda ko'rish, u kelajakda qanday ko'rinishini ko'rsatmaydi. Har qanday sababga ko'ra, deyarli har qanday o'lcham va/yoki tasvir nisbati yuklanganidan so'ng darhol, hatto yuklanganidan keyin ham taxminan 10-15 minut davomida, hatto Instructables-dan chiqib, uni yangi brauzer seansidan yangisida ko'rganingizda ham yaxshi ko'rinadi..

Ammo taxminan bir soat kuting, shunda hamma narsa o'zgaradi! Agar sizning rasmingiz 4: 3 nisbatiga mos kelmasa, Instructable tomonidan o'rnatiladi (odatda kattalashtiriladi), shuning uchun qirralar kesiladi.

13 -qadam: Xulosa - men nimani o'rgandim

Xulosa - men nimani o'rgandim?

1. Rasmni to'liq ko'rsatish uchun 4: 3 nisbatni (kenglik: balandlik) saqlash shart!

2. Katta o'lchamdagi original tasvirlardan foydalaning va ularni 4: 3 nisbatli tuvalga qo'ying. Agar juda katta bo'lsa, Instructables uning hajmini kamaytiradi va sizda yaxshi aniq tasvirlar bo'ladi.

3. Agar sizning tasviringiz juda kichik bo'lsa (kengligi 600 pikseldan kam bo'lsa) Instructable tasvirni kengaytiradi va uni kamida 600 pikselli kenglikka aylantiradi. Men "ish" deb aytaman, chunki men Instructable qanday kenglikdan foydalanayotganini aniq bilmayman, lekin u 600 ga yaqin ko'rinadi. Bu 640 bo'lishi mumkin, bu eski maktab trubkasi monitor kunlarida keng tarqalgan kenglik edi.

600x450 va 640x480 o'lchamlari 4: 3 nisbatda. Eski maktabning "to'liq ekranli" naychali monitorlari 640x480 (kengligi x balandligi) edi.

4. Agar sizning asl tasviringiz kengligi kamida 600 piksel bo'lmasa, nima qilish kerak? Siz qila oladigan narsa bu rasmni asl o'lchamiga yaqin ko'rsatadigan 4: 3 nisbatiga mos keladigan tuvalga tushirishdir. Agar sizning asl tasviringiz kichkina bo'lsa, bo'sh joy juda ko'p bo'ladi, shuning uchun rasmni markazlashtirishga harakat qiling yoki bo'sh joyni rasmning tepasiga yoki ostiga qo'ying va uni eng yaxshi ko'rinishga keltiring.

Men bilganimdek, bu sizning ko'rsatmalaringiz buzilmasligi uchun "Instructables" da qilishingiz kerak bo'lgan murosadir.

Misol sifatida, yuqoridagi rasm 600x450 o'lchamdagi tuval bo'lib, uning ichiga 382x206 tasvir tushirilgan va markazlashtirilgan, shuning uchun biz yuqorida va pastda teng bo'sh bo'sh joyga egamiz. Rasm taxminan asl hajmida ko'rsatiladi, menimcha Instructables uni 640x480 gacha kengaytirishi mumkin (ahamiyatsiz kengayish), shuning uchun biz bu asl tasvirni qila olamiz.

5. Ko'rgazmaga ishonmang yoki Instructable -ga yuklaganingizdan so'ng, sizning rasmingiz dastlabki bir necha soat ichida qanday ko'rinishini ko'rsating! Har qanday sababga ko'ra, siz yuklaganingizdan bir necha soat o'tgach, rasm o'lchamlari mos kelmaydi.

Har safar, siz rasmni birinchi marta tashlaganingizda, Instructables bu tasvirning kattaligi va nisbati qanday bo'lishidan qat'i nazar, uni to'g'ri ko'rsatadiganga o'xshaydi. Biroz vaqt o'tgach ham, u to'g'ri ko'rsatilishi mumkin, lekin uni buzmang, chunki agar siz 4: 3 qoidasiga amal qilmasangiz, u ularning hajmini o'zgartiradi va sizga muammo tug'diradi!

Umid qilamanki, bu yordam beradi va iltimos, agar siz yaxshiroq yo'l topsangiz yoki boshqa maslahatlaringiz bo'lsa, menga xabar bering!