Този урок е нещо като продължение на предишния, в който разгледахме, сега е време да задълбочите знанията си и да видите CSS свойстваИзображения.
Размери на изображението в CSS
Да видим какво е новото тук, създадох img клас, в който зададох размерите на изображението, ширината е ширината, а височината е нашата височина, посочих размерите повече от оригиналните, за да можете ясно да видите как изображението ще се промени.
За по-голяма яснота ще дам пример, където ще има много текст и ще видите какви отстъпи от изображението има този примерще използваме свойството margin, което ще ви даде възможност да оцените неговите възможности.
За по-голяма яснота ще дам пример, където ще има много текст и ще видите какви са отстъпите от изображението в този пример, ще използваме изображение без да задаваме отстъпи, за да можете ясно да видите разликата.
В браузъра виждаме следното:
В този пример направих отстъпи от изображението благодарение на параметъра margin, който ни даде отстъпи от четирите ръба на 20 пиксела. Тук можете да правите по-сложни манипулации, можете да зададете отстъпа от определен ръб, например:
- margin-top - поле от горната страна
- margin-right - поле от дясната страна
- margin-bottom - марж от долната страна
- margin-left - поле от лявата страна
Съответно тук можете да регулирате всичко по-фино или да зададете отстъпа само от една или две страни, без да докосвате останалите.
В браузъра:
Задаваме рамката около изображението, благодарение на параметъра border, първо задаваме ширината на рамката с помощта на border-width, задаваме я в пиксели, след това стила на рамката, тоест нейния външен вид border-style, там има няколко стойности, които можете да изберете:
И последният параметър, който ще коригираме, е цветът на рамката, който се задава от параметъра border-color.
В браузъра виждаме:
Както разбирате, ние присвоихме фона на етикета body благодарение на селектора на тагове, тъй като той заема целия документ, можем да го присвоим и на други тагове. Параметърът фон направи фона картина за нас, адресът, на който пишем в скоби. Можете също да манипулирате фона, например:
фон: url(proba.png) repeat-x;
Фонът ще се повтаря само по оста X, тоест хоризонтално в един ред.
фон: url(proba.png) repeat-y;
Фонът ще се повтаря само по оста Y, тоест вертикално в един ред.
фон: url(proba.png) без повторение;
Фонът няма да се повтаря, но ще се появи само едно изображение.
размер на фона: 500px 200px;
то допълнителен параметър A, който задава размера, ширината и височината на фона на изображението.
Прозрачност на изображението с CSS
В браузъра виждаме следното:
Това свойство дойде с появата на CSS3 и всъщност получи доста широко приложение. Реализиран с помощта на параметъра за непрозрачност, задава прозрачността на изображението, стойности от 0 до 1 и втория параметър на филтъра: алфа (Непрозрачност=50); прави същото за интернет браузър Explorier, защото по-старите версии не поддържат параметъра за непрозрачност, стойности от 0 до 100. В примера специално направих две изображения, за да можете ясно да видите разликата.
Това завършва урока CSS Image Properties, надявам се този урок да ви е бил полезен и да ви е вдъхновил за по-нататъшно изучаване на езика и получаване на нови знания.
Дата на публикуване: 2014-04-22
Изображенията са компоненти на почти всеки сайт, така че преоразмеряването е незаменимо. Има 2 начина за преоразмеряване на изображение: графичен редакторили програмно html кодна css.
Ако в css кодна html не задавайте размера на изображението, тогава неговата височина и ширина на сайта ще бъдат същите в пиксели като в изходен файл. Тоест можете да преоразмерите изображение без css и html, като използвате само графичен редактор и то автоматично ще се промени на сайта, ако не посочите размера му. Но има случаи, когато е необходимо програмно да промените размера на изображение в css на html.
1. Промяна на картината в графичния редактор
Можете да промените размера на изображението във всеки графичен редактор (photoshop, gimp, xnview) и той автоматично ще се промени на сайта в съответствие с оригиналния размер.
Предимства на метода:
Картината се зарежда по-бързо, защото не е необходимо да изтегляте допълнителни данни (пиксели), които след това ще бъдат компресирани програмно.
минуси:
Графичните редактори лошо компресират изображения с ширина и височина под 200 пиксела.
Когато е възможно и подходящо, опитайте се да го преоразмерите в графичен редактор, така че картините да се зареждат по-бързо, отколкото когато ги преоразмерявате програмно. Разликата в скоростта може да бъде десетки пъти.
2. Смяна на изображението в css кода на сайта
Професионалисти:
По-бързо и по-удобно задаване на размера. Този методнамаляването на изображението обикновено се използва за удобство. Например, когато една картина може да има много различни размери, често е по-удобно да промените стойностите на една и съща програмно, отколкото да качите всички формати на едно изображение, редактирано в графичен редактор.
Качествено компресирани малки снимки, по-малко от 200 пиксела във височина или ширина, за разлика от графичните редактори. Ако искате размерът на изображението в сайта да е по-малък от 200px, по-добре е оригиналният размер да е с 30-50% (260-300px) по-голям, за да запазите добро качествопри намаляване.
В същото време разликата в скоростта на зареждане на сайта няма да се усети, тъй като малките изображения заемат много малко място и ако увеличите размера им с 30%, няма да забележите никакви промени. Но забележете разликата в качеството.
минуси:
Програмно компресираните снимки отнемат повече време за зареждане, тъй като преоразмеряването става само след изтегляне на оригиналната версия. Следователно, ако размерът на изображението е повече от 200 пиксела по ширина или височина, тогава е по-добре да го компресирате в графичен редактор, така че сайтът да работи по-бързо.
как да преоразмерите html изображение с помощта на css
За да промените размера на изображение в html cssсе използват свойства ширина (ширина) и височина (височина)вътре в атрибута style. Можете да напишете само ширина или височина, а останалата неуточнена стойност ще се промени автоматично, като същевременно се запази съотношението на картината. Например, като посочите само ширината на изображение с помощта на ширина, неговата височина ще се промени автоматично, запазвайки съотношението на страните. И обратно, когато посочите само височината (височината), неговата ширина също ще се промени автоматично, запазвайки съотношението на изображението.
Пример за код без посочване на размерите на изображението
Резултат в браузъра
Код на страницата
Примерен код с преоразмеряване на изображение в .css
Резултат в браузъра
Код на страницата
style="width:150px; ">
И двата примера по-горе използват едно и също изображение с размер 300x184px (ширина и височина). В 1 пример изображението се показва в браузъра без промени с оригиналния размер 300x184px, тъй като ширината и височината не са посочени в css. И във втория пример картината се показва в браузъра намалена 2 пъти, тъй като ширината е 150px, височината съответно автоматично се променя на 92 px. Както можете да видите, свойството височина може изобщо да не е зададено, тъй като то автоматично се променя пропорционално на ширината.
Ако предоставите и двете опции: ширина (ширина), височина (височина)и те няма да отговарят на пропорциите, тогава картината ще има точно този размер, но в компресиран или разтегнат вид, в зависимост от стойностите.
Защо не е желателно да увеличавате снимки
Важно: Увеличаването на размера на изображението е съпроводено със загуба на качество. Когато променяте по какъвто и да е начин, важно е да зададете стойностите по-малко, отколкото в оригиналното изображение, тоест само да намалите.
Ако зададете размера на пиксела да бъде по-голям от оригиналното изображение, качеството ще се влоши. И загубата на качество ще бъде ясно видима, защото компютърът не може да добавя нови пиксели, той може само да увеличи размера на съществуващите. Колкото по-голямо е увеличението на изображението спрямо първоначалната стойност, толкова по-лошо е качеството му и по-ясно видимите квадратни пиксели.
За да промените размера на картина с помощта на HTML за етикет предоставени са атрибути width (ширина) и height (височина). Като стойност се използват пиксели, а аргументите трябва да съответстват на физическите размери на изображението. Например на фиг. 10.6 показва изображение с размери 100x111 пиксела.
Ориз. 10.6. снимка в оригинален размер
Съответно, HTML кодът за поставяне на тази фигура е показан в пример 10.4.
Пример 10.4. Изчертаване на размери
Ако размерите на изображението са посочени изрично, тогава браузърът ги използва, за да покаже празната област, съответстваща на изображението, по време на зареждането на документа (фиг. 10.7). В противен случай браузърът изчаква изображението да се зареди напълно, преди да промени ширината и височината на изображението (Фигура 10.8). В този случай може да възникне преформатиране на текста, тъй като първоначално размерът на картината не е известен и автоматично се задава на малък.
Ориз. 10.7. Размерът на изображението не е посочен и то все още не е заредено
Ориз. 10.8. Изображението е качено, текстът е преформатиран
Ширината и височината на изображението могат да се променят както нагоре, така и надолу. Това обаче не влияе по никакъв начин на скоростта на изтегляне на картината, тъй като размерът на файла остава непроменен. Затова намалете изображението с повишено внимание, т.к. това може да предизвика объркване сред читателите, защо толкова малък чертеж отнема толкова време за зареждане. Но увеличаването на размера води до обратния ефект - размерът на изображението е голям, но файлът се зарежда по-бързо спрямо изображението със същия размер.
На фиг. 10.9 показва същото изображение като показаното на фиг. 10,6, но удвоени на ширина и височина.
Ориз. 10.9. Изглед на увеличеното изображение в браузъра
Кодът за такъв чертеж ще остане почти непроменен и е показан в Пример 10.5.
Пример 10.5. Преоразмеряване на картина
Такова преоразмеряване се нарича повторно семплиране и алгоритъмът на браузъра е по-нисък по възможностите си от графичните редактори. Следователно е необходимо изображението да се увеличава по този начин само в специални случаи, в противен случай качеството на изображението се влошава твърде много. По-добре е да използвате някаква графична програма. Изключение правят чертежи, съдържащи правоъгълни области. На фиг. Фигура 10.10 показва файл с шаблони, който заема 54 байта и има оригинален размер от 8 на 8 пиксела, мащабиран до 150 пиксела.
Ориз. 10.10. Увеличено изображение
Браузърите използват два алгоритъма за повторно семплиране - бикубичен (дава гладки ръбове и плавен тонален диапазон от цветове) и най-близките точки (запазва оригиналния набор от цветове и остри ръбове). Последните версии на браузърите използват бикубичен алгоритъм, докато по-старите браузъри, напротив, използват алгоритъм на най-близката точка.
Инструкция
Първо опитайте да намерите снимката с помощта на търсачките. Въведете заявка и след това изберете раздела с настройки за търсене. Google, например, има бутон „Инструменти за търсене“, докато Yandex има икона с плъзгачи. След като трябва да изберете елемента "Размер" и да посочите точните стойности. Или, например, ако имате нужда от снимка с добра резолюция, изберете "Large".
Ако няма картина с желания размер, тогава тя може да бъде нагласена на рамката сами. Има начини. Първият е, че първо създавате документ с желания размер и след това променяте картината. Второто е обратното - отворете снимката и сменете размера. По същество няма разлика: всичко зависи от вашите предпочитания и цели. Примерите ще бъдат разгледани в Adobe Photoshop, но можете да използвате други графични редактори.
Първи начин. Щракнете върху "Файл" - "Създаване ..." или клавишната комбинация Ctrl + N. Пред вас ще се появи прозорец с настройки. Посочете ширината, височината и необходимите параметри за цветова разделителна способност там. След това отворете изображението, което харесвате в браузъра, щракнете с десния бутон и изберете „Копиране на изображение“. След това се върнете в програмата и натиснете комбинацията Ctrl + V.
Картината ще се появи в прозореца на графичния редактор. След това щракнете върху "Редактиране" - "Безплатна трансформация" или комбинацията Ctrl + T. Ще се появят ключови точки, с помощта на които можете да напаснете изображението към размера на работния прозорец. Веднага щом получите желания резултат (между другото, можете да излезете извън границите на работната област), щракнете върху „Файл“ - „Запазване като ...“ или клавишната комбинация Ctrl + S.
Вторият начин. Първо трябва да отидете на компютъра, след това да щракнете върху "Файл" - "Отвори ..." (или комбинацията Ctrl + O) и да изберете желаното изображение. След това изберете "Изображение" - "Размер на изображението ..." или натиснете Alt + Ctrl + I. Премахнете отметката от "Запазване на съотношението" и изберете желания размер. След това натиснете клавиша OK.
Снимката ще бъде преоразмерена според зададения размер в сантиметри (милиметри, инчове), както и посочения размер в DPI, според стандартите за печат на хартия. Размерите в cm, mm и инчове могат да бъдат зададени с точност до хилядни, например вместо формат 15x10 можете да зададете 15.201x10.203 cm.
Таблица със стандартни размери на снимки във вертикално (портретно) положение:
| Формат на снимката в сантиметри (cm) | Размер в милиметри (mm) | Размер в пиксели (за печат 300dpi) |
Съотношение (в пейзажна ориентация) |
| 3x4 (след ръчно рязане) | 30x40 | 354x472 | 4:3 (1.33) |
| 3.5x4.5 (след ръчно рязане) | 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) |
Стандартен размер на листа хартия формат А4- 21x29.7 cm или 2480x3508 пиксела при 300 dpi. Размерите на други формати на листа могат да се видят на страницата на Wikipedia, но просто не забравяйте, че размерите са посочени там в милиметри и инчове, т.е. в настройките на тази страница трябва да изберете подходящата стойност.
Ако трябва да преоразмерите снимка, без да вземете предвид DPI (точки на инч), т.е. само спазвайки пропорциите на посочения формат, тогава за това трябва да зададете параметъра "Размер в DPI" на "0" в настройки.
Оригиналното изображение не се променя по никакъв начин. Ще ви бъде дадена друга обработена снимка.