Как сделать резиновую картинку?

«Резиновой» называется картинка, обладающая способностью масштабироваться. Создать такую картинку можно, используя компьютерные программы. Ее удобство заключается в том, что она «растягивается» в нужном направлении. Такое веб-творение успешно отображается в любом браузере. Если картинка содержит какие-то полезные элементы, «резиновые» свойства повышают ее функциональность.
Создать сайт самостоятельно с Wix.com

Вам понадобится

• изображение, сайт, программа Adobe Photoshop, приложение «Блокнот», HTML-код, корневой каталог своего сайта

Инструкция

Найдите или создайте изображение, которое необходимо сделать масштабирующимся и разместить в сети интернет. Запустите программу Adobe Photoshop. Откройте это изображение в программе. На панели инструментов найдите Slice Tool. С его помощью разрежьте изображение на части. Разделите ее таким образом, чтобы вся картинка состояла из трех графических элементов и центральная была пустой. Это поможет картинке растягиваться при любом разрешении монитора.

Сохраните картинку с оптимизацией для веб-формата (Save for web). При сохранении установите необходимый формат файла - gif, jpeg или png. Для того, чтобы изменить отдельные фрагменты изображения, найдите в меню опцию Slice Select Tool и измените части картинки таким образом, чтобы из размер был минимальным при наименьших потерях качества во время визуализации на экране. После изменения сохраните картинки как html и images.

Когда сохранили изображения, займитесь редактированием HTML-кода. Откройте сохраненный html-документ в приложении «Блокнот». Сотрите все строки кода, в которых нет необходимости. Сохраните неизменными только данные о таблице, в которую встроены изображения

В строках вместо yourimage.gif укажите путь к изображениям на вашем компьютере. Высота и ширина должна быть соответствующая.

Для того, чтоб сделать растягивающейся среднюю часть изображения, когда крайние части разводятся в стороны, пропишите необходимую информацию в строках кода. Укажите параметры (ширину и высоту) собственного изображения.

Произведите загрузку созданных изображений в корневой каталог сайта. Укажите новые пути к картинкам на сервере, отредактировав таким образом HTML-код. Впишите код картинки между тегами .

Проверьте свойства картинки. Попробуйте изменить ее масштаб в интернете. Изображение должно быть пластичным в любом направлении.

Оцените статью!