Оптималното използване на изображения изисква преобразуването на височината и ширината на оригинала за правилното вмъкване в дизайна на обекта. Обикновено изображението се въвежда от посетител, мениджър на онлайн магазин, служител на компанията и т.н. Въвеждането на информация и изображения се определя от целта на уеб ресурса. Във всички случаи е необходимо да се коригира действителното изображение на мястото, което му е отредено на страницата на уеб ресурса.
HTML етикет за показване на чертежи
Тагът img се използва за показване на изображението в браузъра. Разработчикът посочва в този етикет размерите на HTML на изображението, ширината на рамката и действителния адрес на файла, съдържащ чертежа. Img етикетът няма начин да определи позиционирането на изображението. Можете да посочите само действителния размер или промяна на размера.
В този пример реалното изображение се показва в реален размер в местоположението на img tag, 50% намаляване на височината и ширината и изкривена версия, когато височината се променя само. Практическият начин за промяна на размера на изображението в HTML, както и неговата действителна позиция, предполага използването на CSS.
Тук img тагът съдържа указание за източника на изображението и неговите размери и позиция са описани в CSS стиловия файл. Трябва да се отбележи, че както в случая с img, оразмеряването на стиловата таблица е пропорционално на размера на изображението.
Място на изчисляване на размерите на изображението
Има две възможности, както и къде можете да извършите преобразуването на височината и ширината на изображението. Вариантът на сървъра (например PHP) е статичен,Вариантът на браузъра (javascript) е характеристика на динамиката.
Използването на сървърния език се случва при обработката на големи обеми от данни и е ориентирано към създаването на бази данни, например обхвата на стоките в онлайн магазина.
Чрез изтегляне на чертежи на стоки в магазина, управителят може да не се интересува как ще изглежда този или онзи продукт. Разработчикът на уеб ресурс (онлайн магазин) може да разработи алгоритъм за автоматично определяне на необходимия размер за всеки продукт: хладилникът и шапката за плуване ще бъдат показани в същото качество. Характеристиките на javascript обикновено не се използват за преобразуване на височината и ширината на изображението, а за подобряване на комфорта на посетителя. Например разработчик може да присвои събитие на етикет, съдържащ изображението на продукта, а преместването на мишката върху него ще покаже продукта в по-голяма форма. Тук не се изисква изтегляне на изображения, но ако се използва малко изображение, увеличаването на изображението ще замъгли контурите.
Практиката да се използва javascript за преоразмеряване на изображение в HTML е популярна. Особено важно е не само да се увеличи изображението, но и да се покажат неговите части в отделен прозорец (етикет). За тази цел обикновено се използват две изображения на един и същ продукт: единият е основният, а другият е подробен.
Други варианти за представяне на изображения
Прякото използване на изображения се изисква в ежедневната практика, но не и за изображенията в контекста: стоките в магазина, снимката на служителя на листа отсчетоводство на персонала, процес на проектиране на екран, връзка към презентация или портфейл. В идеалния случай се прилага таг img за малки рисунки - икони. Това е удобно, практично и не изисква използването на CSS за описване на този етикет. По-удобно е да се използват HTML и размерите на изображенията на div или span.
В този пример, идентификаторът div id scLine съдържа изображение, което се позиционира с помощта на CSS. Размерът на HTML изображенията се определя от правилата на CSS. Вътре в това чудо е img тага, който също може да бъде лесно позициониран и може да бъде настроен на желания размер. Основната характеристика на това решение - div HTML тагове и размера на фоновото изображение могат да образуват спомагателен дизайн за img. Стилът img на описанието може да остане непроменен, но стилът на външния таг може да се промени. Разработчикът може да формулира много интересни решения и да създаде удобно показване на графична информация.
Използване на CMS и ръчно разработване
Просто използвайте HTML. Размерът на изображението, неговата позиция и прозрачност са лесни за промяна. Просто свържете скрипта на събитието и дайте динамика на изображението. Когато се използват системи за управление на обекти, някои възможности са трудни за използване. Всяка CMS "смята за свое задължение" да наложи доктрината си върху представянето на изображенията и тяхната динамика, когато ги гледа един посетител на сайта.
Въпреки това, всяка CMS дава на разработчика възможността да допълни както PHP кода, така и функционалността на javascript. Можете да използвате тази функция, за да дадете на сайтовете си уникална видимост във фонов режимпродукти, изпълнявани на подобни CMS. Човекът на уеб ресурса винаги има значение, особено когато се изпълнява не в ръчната разработка (която винаги е уникална), а на базата на известната система за управление на сайта.
