Как позиционировать картинку в css
Перейти к содержимому

Как позиционировать картинку в css

  • автор:

Как вставлять картинки и производить их позиционирование в HTML

В данном уроке мы рассмотрим, как вставлять изображения в html документ, производить его позиционирование, а также как установить изображение в виде фона.

Как вставлять картинки и производить их позиционирование в HTML

Материалы по теме:

  • Как сделать ссылку в HTML — виды ссылок — изображение ссылка
  • Быстрое введение в HTML5 для веб-мастеров
  • Создание таблиц в html — фон таблицы — рамка таблицы — объединение ячеек

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

Основные форматы изображений, которые используются при создании web страниц это JPG, GIF и PNG. Для работы с изображениями и подготовки их к публикации в интернет можно пользоваться графическим редактором Photoshop. В нем есть средства при помощи, которых очень легко можно пережать изображение и уменьшить его размер, но при этом сохранить качество.Это очень важно для изображений, публикуемых в интернете.

Если вам нужны различные графические элементы то можете зайти в раздел Графика для сайтов, там вы найдете уроки посвященные созданию web графики.

Ну а теперь о том как вставить картинку в html документ. Для вставки изображений используется тег . Этот тег не имеет закрывающего тега. Вставка изображений при помощи его осуществляется следующим образом:

В кавычках необходимо указать путь к этому изображению.

Если изображение лежит в той же папке что и страница, в которую оно вставляется, то это будет выглядеть так:

Если же изображение лежит, например, в папке images то путь к нему будет выглядеть так:

Если изображение лежит на другом сервере, то необходимо давать полный адрес к изображению. Например, ссылка на картинку, которая расположена в начале этого урока выглядит так:

Изображение в html

Для того чтобы вы лучше поняли как это работает я предлагаю вам в какую либо папку на вашем компьютере сохранить изображение которое вы видите слева. И создать в той же папке html документ, содержащий код расположенный ниже. Если вы не знаете, как создать html файл тогда смотрите урок Основы HTML.

  Моя первая страница   Этот текст я написал специально для того чтобы вы могли видеть как располагается изображение на странице относительно текста. Далее мы разберем различные атрибуты при помощи, которых вы сможете по-разному позиционировать изображение. 

После того как вы откроете созданную страницу в браузере то увидите что картинка располагается не совсем красиво. Поэтому далее мы разберем, каким образом можно позиционировать изображение. Здесь нам на помощь приходит уже знакомый вам по уроку Параграфы и выравнивание текста в HTML атрибут align=»».

Существуют следующие значения этого атрибута:

В этом случае картинка будет прижата к левому краю, а текст будет обтекать ее справа.

Картинка будет прижата к правому краю, а текст будет обтекать ее слева.

В этом случае текст будет располагаться в низу картинки. Так он располагается по умолчанию, если атрибут align не прописан.

Текст будет располагаться по середине картинки. Это позиционирование хорошо использовать, если нужно маленькое изображение позиционировать по центру строки текста, например кнопку.

Текст будет располагаться вверху изображения. Можете попробовать подставлять различные значения и посмотреть, как будет изменяться положение картинки относительно текста.

Следующий атрибут, определяющий положение изображения называется vspace=»». Он определяет расстояние между текстом и изображением по вертикали. В кавычках указывается любое необходимое значение в пикселях.

Расстояние между текстом и изображением по горизонтали определяется атрибутом hspace=»».

Следующие атрибуты это width=»» определяет ширину картинки и height=»» определяет высоту картинки. Если вы их не пропишите картинка все равно отобразится и будет того размера как она и есть. Но лучше всего прописывать ширину и высоту картинки. Например, для нашей картинки это будет выглядеть так:

Следующий атрибут очень важен в плане поисковой оптимизации вашей страницы. Это атрибут alt=»» где в кавычках указывается описание картинки. Поисковые системы обращают внимание на то, что написано между кавычек. Это описание будет отображаться, если подержать курсор над картинкой несколько секунд. Для нашей картинки можно прописать так:

Ну и последний атрибут это border=»» определяет ширину рамки вокруг картинки. В кавычках указывается ширина рамки, например, так:

Как вы уже наверняка заметили все атрибуты можно использовать как по отдельности, так и вместе. Окончательный код нашей картинки будет следующий:

Кроме этого изображение можно не просто вставлять на страницу но и использовать его в качестве фона для страницы. Для того чтобы определить картинку в качестве фона для нашей страницы в открывающем теге необходимо прописать атрибут background=»» где в кавычках указать адрес картинки подобно тому как мы это рассматривали выше.

К примеру зададим фон для вашей картинки. Для этого сохраните изображение фона, которое вы видите с лева, в ту папку где лежит ваша ранее созданная страница. Затем в теге пропишите следующее:

Полный код страницы будет следующий:

  Моя первая страница   Фотография девушкиЭтот текст я написал специально для того чтобы вы могли видеть как располагается изображение на странице относительно текста. Далее мы разберем различные атрибуты при помощи, которых вы сможете по-разному позиционировать изображение. 

Таким образом, мы расположили наше первое изображение слева, тест его обтекает справа, задали отступы между изображением и текстом в 10 пикселей, указали его высоту и ширину, а в качестве фона задали еще одно изображение.

Материал подготовлен порталом: webmastermix.ru

Рекомендуем ознакомиться:

  • Как задавать цвет фона HTML документа
  • Параграфы и выравнивание текста в HTML
  • HTML цвета
  • Как изменять цвет текста в html документе
  • Фон в CSS

Как работает автоматическое позиционирование в CSS?

Несколько недель назад Андрей задал интересный вопрос в комментариях к одной из моих публикаций посвященных созданию навигации для сайтов. Андрей отметил что подменю имеет абсолютное позиционирование в то время как ни для одного из его родительских элементов позиционирование задано не было. Почему тогда подменю отображается точно под родительской ссылкой?

Если честно, я не знал что ответить. Как и Андрею, мне казалось что при отсутствии других элементов с заданным позиционированием, подменю должно было позиционироваться относительно элемента html и отображаться в верхнем левом углу браузера, но на практике все обстояло иначе.

Объяснение оказалось очень простым, хотя чтобы его найти пришлось провести маленькое расследование. Не буду описывать как именно я нашел объяснение, просто поделюсь результатом.

Иллюстрация

Содержащие блоки задают контекст позиционирования

Если вкратце, когда мы задаем элементу позиционирование, оно рассчитывается относительно содержащего блока. Таким содержащим блоком является ближайший родительский элемент с позиционированием отличным от static . Если для родительских элементов не указано позиционирование, содержащим блоком становится начальный блок — элемент html .

В своей публикации я описал как можно создать выпадающее меню с помощью шаблона Suckerfish. Я использую Suckerfish уже давно, так же как наверное и вы. По умолчанию подменю располагается далеко за пределами страницы, обычно на -999em слева от нее. При наведении курсора значение для left изменяется на auto и подменю появляется прямо под родительским пунктом меню.

На первый взгляд, подменю не подвергается действию вышеизложенного принципа позиционирования относительно содержащих блоков. Ни для одного из его родительских элементов позиционирование не задано, значит подменю должно позиционироваться относительно элемента html или же окна браузера.

По крайней мере, так думали я и Андрей. Наша ошибка состояла в понимании принципа работы значения auto .

Иллюстрация

Как браузеры интерпретируют значение auto ?

Мы оба предполагали, что значение auto эквивалентно 0, тоесть запись left:auto равняется left:0 . В некоторых случаях значение auto в СSS действительно равняется нулю, но не в этом.

Когда для элемента указано position: absolute , его расположение (и часто размер) регулируются свойствами top , right , bottom и left . Эти свойства указывают отклонение от исходного размещения элемента относительно содержащего блока. Для элементов, прописанных с помощью непарных тегов ( , ), результат при применении значения auto (для свойства top , right , bottom или left ) зависит от того задано ли оно для остальных атрибутов позиционирования.

Последнее является ключевым моментом. По умолчанию auto не эквивалентно 0. Оно может быть равно 0, но это зависит от того какие значения заданы для остальных атрибутов позиционирования.

Выпадающее меню Suckerfish задает и впоследствии изменяет значение свойства left , остальные три свойства остаются auto . Когда мы изначально указываем left: -999em , в действие вступает свойство right и подменю располагается далеко за пределами страницы. При наведении курсора, когда значение свойства left меняется на auto , все четыре позиционирующие атрибуты получают значение auto .

Статья об элементах с абсолютным авто-позиционированием объясняет что именно происходит, так же как и эта статья с Dev.Opera об абсолютном и фиксированном позиционировании. Ниже приведена цитата из последней.

Значением по умолчанию для атрибутов top , right , bottom и left является auto , значит блок с абсолютным позиционированием расположен там где он был бы расположен без позиционирования. Однако, он удален из нормального потока и перекрывает любой элемент который следует за ним.

Вы можете увидеть примеры на изображениях ниже и выше в этой статье. На изображении выше меню появляется при наведении курсора на родительскую ссылку. В этом случае значением для свойства left (а также для top , right и bottom ) является auto .

На изображении ниже такое же меню без позиционирования для подменю. Подменю расположено так же как и на изображении выше. Элементы меню верхнего уровня располагаются в разных частях изображений, так как во втором случае подменю присутствует в нормальном потоке документа, но само подменю расположено в одном и том же месте на обеих изображениях.

Если задуматься, все логично. Если бы по умолчанию auto было равно 0, элемент со значением 0 для всех сторон должен был бы растягиваться до границ своего контейнера. В некоторых случаях мы рассчитываем на то что он так и будет себя вести, например при вертикальном центрирование элементов.

В нашем случае происходит по другому. Когда для всех 4 сторон (или же для двух противоположных сторон) указано значение auto , расположение элемента зависит от интерпретации браузером.

Мы используем такое поведение для выравнивания центрального блока по горизонтали с помощью margin-left: auto и margin-right: auto . В этом случае margin делится на две равные части и элемент центрируется. В случае с выпадающими меню, дочерний список отображается там, где он бы находился без позиционирования.

Иллюстрация

Итог

Некоторые читатели могут удивиться зачем я трачу время на описание очевидного. При взгляде на готовый пример, механизм авто-позиционирования кажется очевидным, но он не был таким для меня когда я только начал разбираться в принципе работы содержащих блоков и авто-позиционирования. Раз Андрей поднял этот вопрос, для него все это также не было очевидным. Думаю мы не исключение и найдутся те кто подтвердит что все это не является очевидным и для них.

Иногда мы используем те или иные технологии не пытаясь разобраться как они работают. Когда приходится объяснить принцип их работы, мы затрудняемся это сделать. Хотя иногда стоит разобраться в механизме работы используемых приемов.

Я никогда не буду принимать как должное то, как значение auto работает для того или иного свойства и предполагать что оно будет работать так как я ожидаю. Теперь я всегда думаю наперед как будет рассчитываться числовой аналог для auto и как оно будет зависеть от применения значения auto для смежных атрибутов. В большинстве случаев его поведение является таким как я и ожидал, но думаю вероятны случаи когда он будет отличаться от ожидаемого и приведет к интересным результатам.

Свойство background-repeat

Свойство background-repeat задает каким образом повторять фоновую картинку элемента. По умолчанию картинка повторяется и по оси X, и по оси Y, таким образом покрывая собой всю доступную область.

Синтаксис

Значения

Значение Описание
no-repeat Картинка не будет повторяться вообще.
repeat-x Картинка будет повторяться по оси X.
repeat-y Картинка будет повторяться по оси Y.
repeat Картинка будет повторяться по оси X и по оси Y.
space Картинка повторится столько раз, чтобы полностью заполнить область, если это не удается, между картинками добавляется пустое пространство.
round Картинка повторится так, чтобы в области поместилось целое число рисунков, если это не удается сделать, то фоновые рисунки масштабируются.

Значение по умолчанию: repeat — покрывает узором весь экран.

Пример

По умолчанию фоновая картинка замостит собой весь элемент:

Пример

Давайте сделаем так, чтобы картинка не повторялась:

Пример

А теперь пусть картинка повторяется по оси X:

Позиционировать картинку

Budun

Budun

20.12.2012 18:08 721

Здравствуйте.
Я пытаюсь имитировать дизайн этого сайта: http://www.ege.edu.ru/ а конкретно где школьная доска и картинка что с права от школьной доски.
Возникла следующая проблема: — школьная доска установилась без проблем, но картинка что с права от доски при разном разширении монитора
уходит, сдвигается во внутрь сайта. И еще, при нажатии «Ctrl-» (картинка что с права от доски), уходит, сдвигается во внутрь сайта, и при нажатии «Ctrl+» соответственно вылазит за пределы сайта.
Где я допустил ошибку? Как правильно прописать код
Мой тестовй сайт http://kompcenter.net.ua/

Ответы на пост (9) Написать ответ

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *