Tasvir deyarli har qanday sayt uchun ombor bo'lib, u dunyoni o'zgartirmasdan qila olmaydi. Rasm hajmini ikki usulda o'zgartirishingiz mumkin: grafik muharrir yordamida yoki html kodida CSS ga dasturiy ravishda.
Agar siz CSS kodidagi rasm o'lchamini html ga o'rnatmasangiz, uning saytdagi balandligi va kengligi chiqish faylidagi kabi piksellar uchun bir xil bo'ladi. Shunday qilib, siz grafik muharrirdan foydalangan holda CSS va htmlsiz tasvir hajmini o'zgartirishingiz mumkin va u saytda avtomatik ravishda o'zgaradi, shuning uchun siz hajmini o'zgartirishingiz shart emas. Ale ê vypadki, agar CSS tasvirining hajmini html ga dasturiy ravishda o'zgartirish kerak bo'lsa.
1. Grafik muharrir yordamida rasmlarni o'zgartirish
Tasvirning o'lchamini istalgan grafik muharrirda (photoshop, gimp, xnview) o'zgartirishingiz mumkin va u saytda avtomatik ravishda asl o'lchamiga o'zgaradi.
Usulning afzalliklari:
Rasm ko'proq ma'qul bo'ladi, parchalar kirish ma'lumotlarini (piksellarni) olishlari shart emas, chunki ular keyinchalik dasturiy tarzda siqiladi.
Kamchiliklari:
Grafik muharrirlar har bir kenglik va balandlik uchun 200 pikseldan kichikroq tasvirlarni noto'g'ri siqib chiqaradi.
Har doim, agar iloji bo'lsa va iloji bo'lsa, dasturni o'zgartirganda, tasvirlar yanada chigal bo'lishi uchun sxemani o'zingiz grafik muharrirda o'zgartirishga harakat qiling. Svidkostning chakana narxi o'nlab marta oshishi mumkin.
2. Saytdagi CSS kodidagi rasmlarni o'zgartirish
Taroziga soling:
Rozmirni o'rnatish osonroq. Tasvirni o'zgartirishning bu usuli aniqlik uchun zastosovuetsya eshitiladi. Misol uchun, agar bitta rasmda juda ko'p turli xil o'zgarishlar bo'lishi mumkin bo'lsa - ko'pincha bitta dasturdagi qiymatlarni o'zgartirish osonroq bo'ladi, keyin barcha format variantlarini bitta rasmda yuklab oling, grafik muharririda tahrirlang.
Grafik muharrirlar uchun balandlik va kenglik uchun 200 pikseldan kichik bo'lgan kichik rasmlar qattiq siqilganga o'xshaydi. Agar xohlasangiz, saytdagi rasm o'lchami 200 pikseldan kam bo'lsa, o'zgartirish paytida yaxshi yorqinlikni saqlash uchun tasvir hajmi 30-50% ga (260-300 piksel) kattaroq bo'lsa, tezroq.
Tezlikdagi barcha farqlar bilan sayt qiziqtirmaydi, chunki kichik tasvirlar biroz vaqt talab etadi va hajmi 30% ga oshgani bilan siz o'zgarishlarni eslay olmaysiz. Ale, farqni belgilang.
Kamchiliklari:
Rasmlar, dasturiy uslubda, ko'proq zavantazhuyutsya, oskylki zmína rozmíru vydbuvaaetylki zavantazhennia original versiyasi keyin. Shuning uchun, agar tasvir har bir kenglik yoki balandlikda 200 pikseldan ko'proq kengaytirilsa, sayt yaxshiroq ishlashi uchun uni grafik muharrirda siqib qo'yish yaxshiroqdir.
CSS-da yordam olish uchun html-da tasvirlar hajmini qanday o'zgartirish mumkin
CSS-dan foydalanib, html-dagi rasm hajmini qanday o'zgartirish mumkin kenglik (kenglik) va balandlik (balandlik) o'rtada uslub atributi joylashgan. Siz faqat kenglik yoki balandlik yozishingiz mumkin va agar ko'rsatilmagan bo'lsa, rasmning nisbatlarini saqlash uchun qiymat avtomatik ravishda o'zgartiriladi. Misol uchun, qo'shimcha kenglik uchun faqat rasmning kengligini belgilash orqali uning balandligi avtomatik ravishda o'zgaradi, proporsiyalarni oladi. Avvalo, siz faqat balandlikni belgilaganingizda, rasmning nisbatlarini tanlab, kenglik ham avtomatik ravishda o'zgaradi.
Tasvirni qo'shmasdan tugma kodi
Natija brauzerda
Partiya kodi
.css-da tasvir hajmini o'zgartirish uchun kod misoli
Natija brauzerda
Partiya kodi
style="width:150px; ">
Ikkala dumbada 300x184px (kenglik va balandlik) o'lchamdagi bir xil rasm ko'proq vikoristonni ko'rsatmoqda. 1 ta misolda rasm brauzerda asl oʻlchami 300x184px bilan oʻzgarmagan holda koʻrsatildi, chunki CSS da kenglik va balandlik koʻrsatilmagan. Va 2 ta ilovada brauzerda paydo bo'lgan rasm 2 marta o'zgardi, kengligi 150 pikselga o'rnatildi, balandlik avtomatik ravishda 92 pikselga o'zgartirildi. Ko'rib turganingizdek, balandlikning kuchi avtomatik ravishda kenglikka mutanosib ravishda o'zgarishi bilan e'tibordan chetda qolishi mumkin.
Majburiy parametrlarni qanday kiritish mumkin: kenglik (kenglik), balandlik (balandlik) va badbo'y hidi nisbatlarga to'g'ri kelmaydi, keyin onaning o'zi surati shunday bibariya, lekin qattiq chi cho'zilgan ko'rinishlarda, u kuzgi qiymatdir.
Nima uchun rasmlarni qo'shish kerak emas
Muhim: Tasvirning kengayishi ikkinchi sifat bilan birga keladi. O'zgartirish paytida, u qandaydir tarzda bo'lsin, asl tasvirda qiymatni kamroq, pastroq qo'yish muhim, shuning uchun uning o'zgarishi ehtimoli kamroq.
Agar siz piksellar hajmini chiqish tasvirida kattaroq, pastroq qilib belgilasangiz, yorqinlik pasayadi. Yorqinlikning yo'qolishi aniq ko'rinadi, shuning uchun kompyuter yangi piksellar qo'sha olmaydi, u faqat ma'lumotni yaxshilashi mumkin. Tasvir o'zining tashqi qiymati bo'yicha qanchalik kattalashtirilsa, tasvir shunchalik yorqinroq va kvadrat piksellar aniqroq bo'ladi.
Suratning o'lchami tayinlangan o'lchamning santimetrda (millimetr, dyuym) yaxshilanishi, shuningdek, tayinlangan DPI o'lchamining yaxshilanishi, ehtimol qog'oz do'stining standartlariga muvofiq o'zgartiriladi. Sm, mm va dyuym o'lchamlarini mingdan bir qismigacha aniqlik bilan belgilash mumkin, masalan, 15x10 formati o'rniga siz 15,201x10,203 sm o'rnatishingiz mumkin.
Vertikal (portret) holatda standart o'lchamdagi fotosuratlar bilan jadval:
| Fotosurat formati santimetr (sm) | Hajmi millimetrda (mm) | Piksel bo'yicha kengaytiring (do'st uchun 300 dpi) |
Spivvidnoshnja hikoyalari (Landshaft yo'nalishida) |
| 3x4 (qo'l bilan kesishdan keyin) | 30x40 | 354x472 | 4:3 (1.33) |
| 3,5x4,5 (qo'l bilan kesishdan keyin) | 35x45 | 413x531 | 4:3 (1.33) |
| 9x13 | 89x127 | 1063x1535 | 10:7 (1.43) |
| 10x15 | 102x152 | 1181x1772 | 3:2 (1.5) |
| 13x18 | 127x178 | 1535x2126 | 7:5 (1.4) |
| 15x20(≈A5) | 152x203 | 1772x2362 | 4:3 (1.33) |
| 15x21 | 152x216 | 1772x2480 | 4:3 (1.33) |
| 18x24 | 178x240 | 2126x2835 | 19:14 (1.36) |
| 20x25 | 203x254 | 2362x2953 | 5:4 (1.25) |
| 20x30(≈A4) | 203x305 | 2362x3543 | 3:2 (1.5) |
| 30x40 | 305x406 | 3543x4724 | 4:3 (1.33) |
| 30x45 | 305x457 | 3543x5315 | 3:2 (1.5) |
Standart o'lchamdagi qog'oz varag'i A4 formati- 21×29,7 sm yoki 300 dpi da 2480×3508 piksel. Vikipediyaning yon tomonidagi arkadalarda boshqa formatlarning o'lchamlarini tekshirishingiz mumkin, lekin faqat millimetr va dyuymlarda o'lchamlarni qayta taqsimlash mavjudligini unutmang, ya'ni. ikkinchi tomonda tuzatishlar bo'lsa, tegishli qiymatni tanlash kerak.
Agar siz DPI (dyuymdagi nuqtalar) ni sozlamasdan fotosurat hajmini o'zgartirishingiz kerak bo'lsa, sozlamalarda "DPI Size" parametrini "0" ga o'rnatishingiz kerak.
Tashqarida tasvir o'zgarmaydi. Sizga boshqa tahrirlangan rasm beriladi.
Persh ta'minot haqida pastroq fikrda " html-ga rasmni qanday kiritish kerak?”, veb-sahifani katta hajmdagi grafik material bilan qanday o'zgartirishni belgilashning yonida varto emas, resursni koristuvach bilan vizualizatsiya qilishni yaxshilash, balki sahifaga qiziqish soatini oshirish.
Veb-saytlarni yaratishda ularning ko'pchiligi PNG, GIF va JPEG grafik formatlaridan, tasvirlar bilan ishlash uchun esa Adobe Photoshop grafik muharriridan foydalanadi, bu esa yorqinligini yo'qotmasdan tasvir hajmini bo'rttirish va o'zgartirish imkoniyatlariga boy bo'lishi mumkin. veb-pinking uchun muhim.
Tasvirni HTMLga qanday kiritish mumkin?
Tasvirni HTML tomoniga kiritish uchun bitta oddiy teg chiziladi:
,
de xxx - bu tasvir manzillari. Bunday holda, agar rasm bir tomonda bir xil katalogda bo'lsa, teg quyidagicha ko'rinadi:
Biroq, shved va barqaror Internet hali dunyoning barcha burchaklarida mavjud emas va shuning uchun veb-saytdagi rasm shunchaki jozibali emas. Bunday qarashlar uchun muqobil matnni tushunish mumkin.
Sharob tasvir maydonida mavjud bo'lmagan vaqtda yoki tasvirlarsiz brauzer rejimida ko'rsatiladi. Alt teg atributiga yordam uchun VIN qo'shilmoqda .
Grafik faylga muqobil matn qo'shishga misol:
HTML-da tasvirni qayta ko'rib chiqishni tayinlash
Grafik fayl hajmini o'zgartirish uchun balandlik va kenglik teglarini tanlang, bu erda balandlik - balandlik, kenglik - kenglik, piksellarda o'rnatiladi.
Ushbu atributlarni boshqa tanlashda brauzer grafik tarkib uchun joyni ko'radi, sahifaning qalin tartibini tayyorlaydi, matnni ko'rsatadi, shundan so'ng u rasmni o'zi oladi.
Kichkintoylar berilgan o'lchamlar bilan kvadratga joylashtiriladi va u holda, hafta oxiri uchun parametrlar kichikroq yoki kattaroq bo'lganligi sababli, rasm kengayadi yoki qisqaradi.
Agar balandlik va kenglik atributlari tanlanmagan bo'lsa, brauzer yon tomondagi boshqa elementlarning matni ekranini kesish orqali tasvirni oladi.
Ushbu parametrlar piksellar uchun ham (tasvirning o'lchami doimiy va koristuvach ekrani bo'shlig'ida yotmasligi uchun) va oynalar uchun ham (tasvirning o'lchami ekran bo'shlig'ida yotadigan) belgilanishi mumkin. .
Misol uchun:
Shuni yodda tutingki, hozirgi vaqtda tasvirning tashqi hajmini o'zgartirsangiz, bu nisbatni olish kerak.
Buning uchun bir nechta parametrlarning qiymatini ko'rsatish kifoya ( kengligi va balandligi) va boshqa brauzerning qiymatlari avtomatik ravishda hisoblanadi.
Raztashuvannya rasmlar HTML ichida
HTML teglarini qanday boyitish mumkin zastosovuêmo atributini align , qaysi vykonuê vyrivnyuvannya tasvir:
- rasm matndan balandroq turadi;
- rasm matn ostida joylashtirilsa;
- rasm matn tomonidan parchalanib ketgan;
- Rasm matnga o'ng tomonga buriladi.
Rasm mumkin
Shunday jang qiling:
Bachit singari, grafik qo'shish majburiy bo'lishi mumkin va bosilganda, to'liq yoki qisqartirilgan versiyada yozilgan manzilga yo'naltirilishi mumkin.
Tasvirni HTMLda fon sifatida qanday yaratish mumkin?
Tasvirni nafaqat yon tomondan ko'rinadigan ob'ekt sifatida, balki fon yaratish uchun ham kiritish mumkin. Rasmni fon sifatida belgilash uchun abstraktga background=”xxx” atributini yozish kerak, bu erda xxx rasmning manzili bo'lib, xuddi shu tarzda, ko'proq ko'rinishda kiritiladi.
Masalan, quyidagi teksturali tasvirni fon tasviri sifatida belgilaymiz:
Tayyorlangan tomondan papalikdagi rasmni saqlang va keyingi qatorlarni yozing:
Matn bilan fon.
Vazifaning yon tomonidagi fon rasmi.
Teg uchun HTML yordamida kichkintoyning o'lchamini o'zgartirish uchun atributlar kengligi (kenglik) va balandlik (balandlik). Piksellarning ma'nolari singari, piksel ham rasmning jismoniy o'lchamlari har xil bo'lishining sababidir. Misol uchun, rasmda. 10.6 o'lchami 100x111 piksel bo'lgan tasvirni ko'rsatadi.
Guruch. 10.6. Tashqi dunyo tasviri
Shubhasiz, bu kichkintoyni joylashtirish uchun HTML kodi 10.4-ilovada keltirilgan.
10.4-misol. Rosemary chaqaloq
Aniq ko'rsatilgan tasvirni kengaytirish uchun brauzer hujjatni olish jarayonida bo'sh tasvir maydonini ko'rsatish uchun foydalanadi (kichik 10.7). Boshqacha qilib aytganda, brauzer kichkintoylar unga ko'proq qiziqish bildirishlarini tekshiradi, shundan so'ng u rasmning kengligi va balandligini o'zgartiradi (10.8-rasm). Matnni qayta formatlash mumkin bo'lganda, tasvirning parchalari ko'rsatilmaydi va sharob avtomatik ravishda kichik hajmga o'rnatiladi.
Guruch. 10.7. Rasm koʻrsatilmagan va hali ham qiziq emas
Guruch. 10.8. Rasm ustiga yozildi, matn qayta formatlandi
Tasvirning kengligi va balandligi kichikroq, shuningdek kattaroq qilib o'zgartirilishi mumkin. Biroq, kichkintoy tezlikka tupurmaydi, faylning parchalari o'zgarishsiz qoladi. Shuning uchun, tasvirni diqqat bilan o'zgartiring, chunki. tse mozhe viklikati podiv chitachyv, nega bunday kichkina chaqaloq juda uzoq vaqt. Va kengayishning kengayish o'qi teskari ta'sirga keltiriladi - tasvirning kengayishi ajoyib, ammo shunga o'xshash kengayishning boshqa tasvirining fayli yanada rivojlangan.
Shaklda. 10.9 rasmda ko'rsatilgandek bir xil tasvirni ko'rsatadi. 10.6, lekin ikki barobar kenglik va balandlik bilan.
Guruch. 10.9. Rasmni brauzerda kattalashtirilgan holda ko'ring
Bunday kichkintoyning kodi deyarli o'zgarmas bo'ladi va dumbadagi ko'rsatkichlar 10.5.
10.5-misol. Zmína rozmíru kichkina chaqaloq
Bunday o'zgarish resampling deb ataladi, bunda uning imkoniyatlari uchun brauzer algoritmi grafik muharrirlar tomonidan buziladi. Shuning uchun, faqat maxsus kayfiyatlarda tasvirni bunday tarzda yaxshilash kerak, chunki rasmning sifati yomonlashishi kerak. Grafik dastur sifatida tezroq tezlikni oshiring. Vinyatkom ê kichkintoylar, to'g'ridan-to'g'ri kesilgan maydon kabi. Shaklda. 10.10.2010 yilda 54 baytni o'z ichiga olgan va 150 pikselgacha ko'tarilib, 8 dan 8 pikselgacha o'lchamga ega bo'lishi mumkin bo'lgan tasvirchi fayli joylashtirildi.
Guruch. 10.10. Kattaroq rasm
Brauzerlar namunalarni qayta tiklash uchun ikkita algoritmdan foydalanadilar - bikubik (ranglar oralig'ini va silliq ohang diapazonini tekislash) va eng yaqin nuqtalar bo'yicha (ranglar to'plamini va qirralarning aniqligini tanlash). Brauzerlarning qolgan versiyalari kub algoritmini, eski brauzerlar esa algoritmni eng yaqin nuqtalarda to'xtatadi.
Ko'rsatma
Orqa tomonda, poke tizimlarining yordami uchun tasvirni bilishga harakat qiling. So'rovni kiriting va yakunlangan qidiruv bilan yorliqni tanlang. Masalan, Google-da "Qidiruv asboblari" tugmasi mavjud va Yandex-da tovushlar tasvirlari belgisi mavjud. Agar kerak bo'lsa, "Ro'zmir" bandini tanlang va aniq qiymatni ko'rsating. Abo, masalan, katta bino bilan suratga tushish, “Buyuk”ni ko‘rish kerak.
Kerakli rozmíromga ega rasmlar mavjud bo'lmasa-da, vvíom ramkani mustaqil ravishda loyihalash mumkin. Bu erda yo'llar bor. Birinchi qadam kerakli o'lchamdagi hujjatni yaratish va keyin rasmni o'zgartirishdir. Yana bir protilezhny - rasmni ko'rsatish va hajmini o'zgartirish. Chakana savdo, aslida, soqov: bu maqsadda hamma narsa sizning xohishingizga qoldirilishi kerak. Adobe Photoshop dasturida ko'rish uchun murojaat qiling, lekin siz boshqa grafik muharrirlardan ham foydalanishingiz mumkin.
Birinchi usul. "Fayl" - "Yaratish ..." yoki Ctrl + N tugmalar birikmasini bosing. Vikno z nalashtuvannyami ko'rsatishdan oldin. U erda kenglik, balandlik va kerakli rang maydoni parametrlarini ko'rsating. Brauzerda mos keladigan tasvirni ochamiz, sichqonchaning o'ng tugmachasini bosing va "Rasmni nusxalash" bandini tanlang. Keling, dasturga qaytaylik va Ctrl + V kombinatsiyasini bosing.
Rasm grafik muharrir oynasida paydo bo'ladi. Keling, "Tahrirlash" - "Vilne transformatsiyasi" yoki Ctrl + T kombinatsiyasini bosamiz. Asosiy fikrlar bo'ladi, ularning yordami uchun siz ishlaydigan oynaning o'lchami uchun rasm olishingiz mumkin. Istalgan natijani olish bilanoq (gapirishdan oldin siz ish joyidan tashqariga chiqishingiz mumkin), "Fayl" - "Yoqdi saqlash ..." yoki Ctrl + S tugmalar birikmasini bosing.
Boshqa yo'l. Kompyuteringizga havola kerak, so'ngra "Fayl" - "Enter..." (yoki Ctrl+O kombinatsiyasi) tugmasini bosing va kerakli tasvirni tanlang. Keyin "Rasm" - "Rasm o'lchami ..." ni tanlang yoki Alt + Ctrl + I tugmalarini bosing. "Proporsiyalarni tanlang" katagiga belgi qo'ying va kerakli o'lchamni kiriting. Keling, OK tugmasini bosamiz.
