Закрыть панель
Авторизация || вход на сайт

Войти

Учимся делать изображения гибкими

Печать
PDF

04 Марта 2010
Раздел Веб-мастеру

гибкие изображения

Многие веб-мастера предпочитают использовать на своих сайтах изображения с  фиксированными размерами, которые не ужимаются в зависимости от размера окна браузера или разрешения экрана, поскольку использование встроенных изображений порой негативно сказывается на внешнем виде шаблона или дизайне сайта. В таких случаях прибегают к использованию фоновой техники. Поэтапно рассмотрим, как это делается.

post_fordfiesta_style

Шаг 1: Создаем HTML-файл

В первую очередь создаем очень простой html-файл:
 <div id="container">  
<div id="image">  
</div>  
<p>  

После долгих месяцев томительного ожидания мировому сообществу наконец  был представлен абсолютно новый автомобиль Ford Fiesta. Привлекательный и  совершенный, этот автомобиль идеально подходит для современного  динамичного мира.  Это действительно абсолютно новый автомобиль — начиная с дизайна,  используемых материалов и примененных технологий и заканчивая  усовершенствованием двигателя и самого процесса создания автомобиля. При  разработке нового дизайна создатели черпали вдохновение в нашумевших  фильмах, новых архитектурных решениях, популярной музыке и даже модных  сумочках, используя только самые привлекательные и стильные элементы.</p>
<p>Внешний вид без содержания ничего не значит. Новая Ford Fiesta может  похвастать и тем, и другим. Создатели постарались оборудовать компактный  автомобиль всеми достижениями современных технологий: например, в  салоне можно прослушивать музыкальные треки, записанные в памяти iPod  или другого MP3-плеера, подключить телефон к аудиосистеме по  беспроводной связи посредством Bluetooth и совершать звонки, не убирая  руки с руля.</p>
</p>  
</div>

Шаг 2: Добавляем в html-файл CSS

1.    #container  
2.    {  
3.        width: 50%;  
4.        margin: auto;  
5.        padding: 1em;  
6.        background: #cc6600;  
7.        color: #ffffff;    
8.    }  
9.      
10.    #image  
11.    {  
12.        height: 300px;  
13.        background: url(fordfiesta_style.jpg) no-repeat center;  
14.    }

Для того чтобы наш Div был гибким, мы установили ширину окна браузера на 50%. Далее установим поле margin в положение auto для центрирования изображения в материале (контенте).

Div с ID “image”, описывает параметры фонового изображения. Ключевым моментом здесь является то, что мы не устанавливаем конкретную ширину нашего изображения, а только высоту (height). Когда вы устанавливаете изображение, необходимо убедиться, что картинка по центру (параметр no-repeat center).

Важно – Убедитесь, что вы используете изображение, основная фигура в которой расположена по центру.Можно сохранить наш html-файл, например как index.html.

Готово!

ford_fiesta_image_size

Открываем наше творение в браузере и пробуем увеличивать или уменьшать окно браузера. Есть несколько моментов, которые следует помнить при использовании этого метода:

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

Смотреть результат

  Загрузить исходники 37.07 KB


rssfeed Читайте нашу RSS-ленту
Статья была Вам полезна? Подпишитесь и получайте наши новости по RSS. Также Вы можете добавить данную новость себе в закладки. Спасибо.
Email Favoriten
Тэги материала
< Предыдущая   Следующая >
Похожие материалы:
Новые материалы:
Предыдущие материалы:

КомментарииКомментарии  

 
0 #1 MailersTeam 06.03.2010 05:02
Главное, что на фоне авто :lol:
Цитировать
 

Добавить комментарийДобавить комментарий


Защитный код
Обновить

Вход на сайт:



Последние отзывы:

Кто мы? немного информации о проекте uaBIG.com

about_us_uabig

Привет! Рады тебя видеть в нашем блоге. Давай знакомиться! uaBIG.com - проект, реализованный группой молодых людей из Киева. Мы ежедневно наполняем наш блог актуальной и подробной информацией о веб-разработке и дизайне. Если ты хочешь создать красивый сайт своими силами, подписывайся и следи за блогом, мы тебя обязательно научим! Наш рабочий кабинет здесь.

Популярные теги: часто используемые мета-теги uaBIG.com