background-position
Свойство background-position CSS устанавливает начальную позицию для каждого фонового изображения. Положение относительно слоя положения, установленного background-origin .
Try it
Syntax
Свойство background-position указывается как одно или несколько значений <position> , разделенных запятыми.
Values
<position> . Позиция определяет координату x / y для размещения элемента относительно краев рамки элемента. Его можно определить, используя от одного до четырех значений. Если используются два значения, не являющиеся ключевыми словами, первое значение представляет положение по горизонтали, а второе — положение по вертикали. Если указано только одно значение, предполагается, что второе значение находится в center . Если используются три или четыре значения, значения в процентах длины являются смещениями для предшествующих значений ключевого слова.
Синтаксис 1-значения: значение может быть:
- Ключевое слово значение center , который центрирует изображение.
- Одно из значений ключевых слов top , left , bottom , right . Это указывает край, относительно которого нужно разместить элемент. Затем для другого измерения устанавливается значение 50%, поэтому элемент размещается в середине указанного ребра.
- <length> или <percentage> . Это указывает координату X относительно левого края, с координатой Y, установленной на 50%.
Синтаксис с двумя значениями: одно значение определяет X, а другое определяет Y. Каждое значение может быть:
- Одно из значений ключевых слов top , left , bottom , right . Если здесь указано left или right , то это определяет X, а другое заданное значение определяет Y. Если даны top или bottom , то это определяет Y, а другое значение определяет X.
- <length> или <percentage> . Если другое значение является left или right , то это значение определяет Y относительно верхнего края. Если другое значение является top или bottom , то это значение определяет X относительно левого края. Если оба значения являются значениями <length> или <percentage> , то первое определяет X, а второе Y.
- Обратите внимание: если одно значение является top или bottom , то другое значение может не быть top или bottom . Если одно значение left или right , то другое значение не может быть left или right . Это означает, например, что top top и left right угол недействительны.
- Порядок: при объединении ключевых слов расположение не имеет значения, так как браузер может изменить его порядок, значение top left или left top даст тот же результат. При соединении <length> или <percentage> с ключевым словом размещение важно, значение, определяющее X, должно идти первым, а затем Y, значение right 20px не совпадает с 20px right , первое допустимо, а второе недопустимо. Значение left 20% или 20% bottom допустимо, поскольку значения X и Y четко определены, а размещение правильное.
- Значение по умолчанию — left top или 0% 0% .
Трехзначный синтаксис: два значения — это значения ключевых слов, а третье — смещение для предыдущего значения:
- Первое значение — это одно из значений ключевого слова top , left , bottom , right или по center . Если здесь даны left или right , то это определяет X. Если даны top или bottom , то это определяет Y, а значение другого ключевого слова определяет X.
- Значение <length> или <percentage> , если это второе значение, является смещением для первого значения. Если это третье значение, это смещение для второго значения.
- Одиночная длина или процентное значение — это смещение для значения ключевого слова, которое ему предшествует. Комбинация одного ключевого слова с двумя значениями <length> или <percentage> недопустима.
Синтаксис с 4 значениями: первое и третье значения являются значениями ключевого слова, определяющими X и Y. Второе и четвертое значения — смещения для предшествующих значений ключевого слова X и Y:
- Первое значение и третье значения — одно из значений ключевого слова top , left , bottom , right . Если здесь даны left или right , то это определяет X. Если даны top или bottom , то это определяет Y, а значение другого ключевого слова определяет X.
- Второе и четвертое значения — это значения <length> или <percentage> . Второе значение — это смещение для первого ключевого слова. Четвертое значение — это смещение для второго ключевого слова.
Regarding Percentages:
Процентное смещение положения данного фонового изображения относительно контейнера. Значение 0% означает, что левый (или верхний) край фонового изображения выровнен с соответствующим левым (или верхним) краем контейнера, или отметка 0% изображения будет на отметке 0% контейнер. Значение 100% означает, что правый (или нижний ) край фонового изображения выровнен с правым (или нижним ) краем контейнера, или отметка 100% изображения будет на отметке 100% контейнера. . Таким образом, значение 50% по горизонтали или вертикали центрирует фоновое изображение, поскольку 50% изображения будет на отметке 50% контейнера. Точно так же background-position: 25% 75% означает, что пятно на изображении, которое находится на 25% слева и 75% сверху, будет помещено в место контейнера, которое находится на 25% от левого края и 75% от верха контейнера.
По сути, происходит то, что размер фонового изображения вычитается из соответствующего размера контейнера, а затем процент от полученного значения используется как прямое смещение от левого (или верхнего) края.
Используя ось X для примера,предположим,что у нас есть изображение шириной 300px,и мы используем его в контейнере шириной 100px,с background-size,установленным на auto:
Таким образом,при процентах положения -25%,0%,50%,100%,125% мы получим эти значения смещения краев изображения к контейнеру:
Таким образом , с этими результирующими значениями для нашего примера левого край части изображения смещен от левого края части контейнера с помощью:
- + 50 пикселей (размещение левого края изображения в центре контейнера шириной 100 пикселей)
- 0px (левый край изображения совпадает с левым краем контейнера)
- -100px (левый край изображения на 100 пикселей слева от контейнера, в этом примере это означает, что средняя область изображения 100 пикселей центрируется в контейнере)
- -200px (левый край изображения на 200 пикселей слева от контейнера, в этом примере это означает, что правый край изображения совпадает с правым краем контейнера)
- -250 пикселей (левый край изображения на 250 пикселей слева от контейнера, в этом примере правый край изображения шириной 300 пикселей помещается в центр контейнера)
Стоит отметить, что если ваш размер фона равен размеру контейнера для данной оси, то процентное положение для этой оси не будет иметь никакого эффекта, потому что «разница между изображением контейнера и изображением» будет равна нулю. Вам потребуется смещение, используя абсолютные значения.
Как поменять расположение картинки в html – Картинки в HTML – шпаргалка для новичков
Прежде, чем ответить на вопрос «как вставить картинку в HTML?», следует отметить, что перегружать веб-страницы огромным количеством графического материала не стоит, поскольку это не только улучшит визуальное восприятие ресурса пользователем, но и увеличит время загрузки страницы.
При создании веб-сайтов чаще всего используют графические форматы PNG, GIF и JPEG, а для дизайнерских работ с изображениями — графический редактор Adobe Photoshop, обладающий богатыми возможностями для сжатия и изменения размера изображений без потери качества, что является невероятно важным для веб-разработки.
Однако скоростной и стабильный интернет добрался ещё не во все уголки земного шара, и бывает так, что изображение на веб-сайте попросту не загружается. Для таких случаев существует понятие альтернативного текста.
Он показывается на месте картинки в момент его недоступности, загрузки или в режиме работы браузера «без картинок». Добавляется он с помощью атрибута alt тега <img>.
Пример добавления альтернативного текста к графическому файлу:
Для того чтобы изменить размеры отображения графического файла, используют теги height и width, где height — высота, а width — ширина, измеряемые в пикселях.
При использовании данных атрибутов браузер сначала выделяет место для графического контента, подготавливает общий макет страницы, отображает текст, после чего загружает саму картинку.
Рисунок помещается в прямоугольник с заданными размерами, а в том случае, если параметры меньше или больше исходных, картинка растягивается или сжимается.
Если атрибуты height и width не используются, браузер загружает изображение сразу, задерживая отображение текста и прочих элементов страницы.
Данные параметры можно указать как в пикселях (размер картинки постоянен и не зависит от разрешения экрана пользователя), так и в процентах (размер картинки зависит от разрешения экрана).
Следует помнить, что в тот момент, когда вы изменяете исходный размер изображения, необходимо сохранять его пропорции.
Для этого достаточно указать значение только одного из параметров (ширины или высоты), а значение второго браузер вычислит в автоматическом режиме.
Как и ко многим тегам HTML, к применим атрибут align, который выполняет выравнивание изображения:
В HTML для создания ссылки используется тег <a>:
Для того чтобы задать графическую ссылку, необходимо всего лишь объединить тег изображения с тегом ссылки.
Делается это следующим образом:
Как видите, графическая вставка может быть ссылкой и при клике переадресовывать на любой адрес, записанный в полном или сокращённом варианте.
Изображение можно не только вставлять на страницу в качестве видимого объекта, но и сделать фоновым. Для определения картинки как фона необходимо в теге прописать атрибут background=”xxx”, где xxx — адрес картинки, указанный таким же способом, как в примерах выше.
Для примера зададим такую текстурную картинку в роли фоновой:
Сохраните изображение в папке с заготовленной заранее страницей и пропишите следующие строки:
Фоновая картинка на странице задана.
На этом информация о тегах и атрибутах, необходимых для вставки изображения на HTML страницу сайта, исчерпана.
Передвигаем картинку. Двигаем рисунок.
На мой взгляд самый простой способ разместить картинку в нужном месте странице — это использовать
CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — технология описания внешнего вида документа, написанного языком разметки. Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML, включая SVG и XUL.
Более подробно ознакомится с CSS можно здесь.
На это тему написано огромное количество книг, изучая HTML нельзя обойти CSS это не правильно. Так что начинается всё с HTML. :)Я начну рассказ то же с применения HTML. Как известно в HTML есть теги, которые формируют вид страницы в браузере.
У каждой пары тегов есть свои атрибуты, а в свою очередь у каждого атрибута есть свои аргументы, немного путано, но эта цепочка именно так и работает. Весь текст находящийся между парой тегов исполняется и представляется в браузере согласно языка HTML и стилем браузера по умолчанию.
Стиль браузера — стандартный стиль, используемый браузером по умолчанию для представления элементов.
У всех тегов описанных в листинге №1 есть атрибут align он отвечает за расположение текста или картинки в пространстве страницы ПО ГОРИЗОНТАЛИ. Раз есть атрибут тега, значит должен быть и аргумент этого атрибута.
Аргументы атрибута align
Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде под рисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно.
Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.
Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст.
Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится. Но где вы у нас в стране видели такие сайты.
Это картинка в таблице с отступами справа и слева. Здесь используются атрибуты hspace — это отступы по горизонтали и vspace — отступ по вертикали, причем сразу с двух сторон 70->картинка
Теперь используем CSS. Поместим картинку для начала в контейнер или в блок — в этом нам поможет тег див. Он собственно и является своего рода контейнером или ещё называют блоком. Про блочную вёрстку слышали, вот это с его помощью делается.
Синий край это границы контейнера (div), пространство внутри, которое заштриховано, есть то пространство, на которое надо отступить внутри контейнера от его границ (стрелками указана величина в пикселах). Таким образом и происходит размещение контента внутри блока.
Листинг № 1 — Размещение картинки с помощью CSS. Файл стиля.
Рассмотрим подробнее. Первые две строки для нас сейчас не важны их пропускаем. Далее идёт точка — это обозначение класса в CSS. Примерно читается так: класс gif имеет следующие атрибуты:
- padding-top: 200px; — это отступ сверху
- padding-left: 150px; — это отступ слева
- width: 350px; — это ширина самого контейнера
- padding-bottom: 47px; — это отступ снизу
Так же есть атрибут padding-right: — это отступ справа. Ну теперь наверно стало картина прояснятся как можно подвинуть картинку, т.е. меняя аргументы атрибутов, те самые циферки что измеряются в пикселах, хотя кстати то же не обязательно в них. Помимо того, что мы рассмотрели атрибуты которые применяются с тегом див, которые отвечают за расположение объекта внутри контейнера. Существуют ещё атрибуты которые в свою очередь двигают контейнер снаружи относительно страницы это margin.
Листинг № 2 — Это весь HTML-код используемый для установки картинки в нужном месте страницы.
Листинг № 3 — Таблица CSS стилей для последнего примера. (Файл hio.css)
Рекомендованные уроки этого раздела:
Комментарии
Изображения в html
Данная статья написана командой Vertex Academy. Это одна из статей из нашего Самоучителя по HTML&CSS. Надеемся, что данная статья Вам будет полезна. Приятного прочтения!
Изображения моментально дают нам понять, насколько данный сайт или статья могут быть для нас интересными, создают настроение, по новому могут раскрыть тему. Иногда одно фото стоит тысячи слов.
Но и частить ими не стоит, если вы не инстаграм или интернет-магазин. Желательно, чтобы изображения:
- были информативными
- соответствовали цветовой гамме вашего сайта
- были уместны
Если у вас нет подходящего фото, можно воспользоваться так называемым фотостоком (фотобанком) — местом, где хранится множество фотографий, иллюстраций и векторной графики. Таких ресурсов море, вы возможно даже слышали об одном из крупнейших — Shutterstock, но скачивания там платные.
Для тех, кто не любит переплачивать, в конце статьи мы приготовили бонус — список нескольких фотобанков, где можно скачать огромное количество качественных красивых материалов совершенно бесплатно ��
Форматы изображений
Во Всемирной паутине в основном используются 3 вида изображений:
gif (Graphics Interchange Format — формат для обмена изображениями)
это первый формат, который начал использоваться в интернете. Плюсы такого формата — наличие анимации и маленький размер, страница загружается быстро. К тому же он поддерживает прозрачность. Недостаток — используется только 256 цветов (собственно потому и размер маленький), т.е. его нельзя использовать для полноцветных изображений.
jpeg, он же jpg (Joint Photographic Experts Group — Объединенная группа экспертов по фотографии — так называется организация-разработчик)
подходит для создания полноцветных, высококачественных изображений, фотографий. Размер таких картинок велик, поэтому они обычно дают большую нагрузку на сервер. Если нужно сжать jpeg (для меньшего веса картинки) рекомендуем брать размер итогового изображения кратный восьми, так потери качества будут минимальными.
png (Portable Network Graphics — Портативная сетевая графика. Произносится так же как ping, т.е. [pɪŋ])
этот формат изначально разрабатывался для веба, т.е. изображение обычно мало «весит» и не тормозит страницу при загрузке. Этот формат создан на замену устаревшего gif, но в отличие от него, не поддерживает анимацию. Png-8, как и gif, использует всего 256 цветов. Формат png-24 поддерживает 16 млн цветов, правда и вес уже немаленький. Png-32 содержит столько же цветов, как и png-24, и плюс к этому позволяет получить изображение с прозрачным фоном, причем можно регулировать степень прозрачности. При уменьшении размеров png не происходит потери в качестве цвета.
Подытожим
gif — для анимации
jpeg — для фотографий
png — для иконок, кнопок, фонов, логотипов, скриншотов, чертежей, текстов, фотографий с прозрачным фоном
Вставка изображения в html-файл
Для добавления картинки на страницу используется тег <img> (от англ. image — изображение, картинка). Это одиночный тег, ему не нужен закрывающий. Внутри этого тега содержатся атрибуты.
Атрибут src (от англ. source — источник) указывает путь к файлу (место, где лежит изображение). Если картинка лежит у вас на компьютере (пока сайт только в процессе разработки) или на вашем сервере — используйте относительную ссылку. Если имидж из сети, тогда нужна абсолютная ссылка. Как это сделать читайте в статье «Ссылки».
При создании сайта с нуля советуем создать отдельную папку для хранения имиджей. Так вам будет проще управлять всеми файлами, когда ваш сайт разрастется.
Итак, чтобы подключить изображение к вашей веб-странице, нужно написать такой код:
Атрибут alt (от англ. alternative — альтернатива) указывает текст, который увидит пользователь, если изображение не загрузится. Неправильно указан путь, картинка удалена, плохой интернет — причин может быть много, и желательно, чтобы человек понял, что же кроется за этой ненавистной иконкой.
Поисковики обращают пристальное внимание на то, чтобы этот атрибут был заполнен. А html валидатор (ресурс для проверки кода на правильность) воспримет отсутствие атрибута alt как ошибку. Если же все атрибуты <alt> будут заполнены, да еще и содержать по возможности ключевые слова — видимость вашего сайта ощутимо повысится, т.е. его чаще будут показывать на поиске. Это из области SEO, а на данном этапе нам достаточно знать, что есть такой атрибут, и у «живого» сайта он должен быть заполнен. Пока сайт лежит у нас на диске — его вполне можно оставить пустым.
В примере ниже мы умышленно указали несуществующий путь для изображения, чтобы вы увидели, как работает атрибут alt
Высота и ширина изображений
Также можно установить высоту и ширину изображения, если оригинальная картинка напр. больше, чем вам нужна.
В HTML5 это рекомендуется делать с помощью CSS или атрибута style, вот так:
В данном примере мы взяли 30% от ширины, но не оригинального имиджа, а размера окна браузера. Когда ширина = 100%, то изображение открывается на всю ширину браузера. Запомните эту особенность процентов, как единицы измерения.
Кстати, если бы мы написали только ширину, результат был бы тот же, попробуйте:
<img src=»https://vertex-academy.com/tutorials/wp-content/uploads/2016/07/panda.jpg» alt=»панда на дереве»>
Также ширину и высоту можно задавать в пикселях. В случае с нашей пандой, у которой исходные размеры 1196 х 796 пикселей, чтобы при сжатии животное не пострадало, нам нужно сохранить пропорции, а здесь без калькулятора не обойдешься. Допустим, мы хотим уменьшить размер картинки в 3 раза, тогда нам нужно прописать размеры 399 х 265 пикселей.
Обратите внимание, если мы увеличиваем изображение пропорционально, то достаточно указать только один параметр, напр. ширину. Умный браузер сам вычислит полный размер картинки.
Попробуйте запустить такой код и посмотрите на результат:
<img src=»https://vertex-academy.com/tutorials/wp-content/uploads/2016/07/panda.jpg» alt=»панда на дереве»>
Всегда устанавливайте размеры изображения. Обычно картинки грузятся дольше, чем остальной html-код. Если браузер будет знать, сколько места резервировать на имиджи, он сможет продолжить загрузку сайта не дожидаясь, пока загрузятся изображения.
Немножко нафталина
Если вам доведется ковыряться в коде сайта, созданного на HTML-4 или еще более ранних, то вы заметите, что размеры изображений устанавливаются с помощью специальных атрибутов width и height. Это устаревший метод, хотя всё еще валидный в HTML5. Тем не менее советуем использовать style, т.к. на атрибуты width и height могут влиять внутренние или внешние стили, которые будут жить в браузере или вашем CSS-файле. Мы остановимся на этом детальней, когда будем рассматривать CSS, а пока просто посмотрите пример, как стили влияют на атрибуты высоты и ширины.
В этом окне 3 вкладки: на первой вы видите html-код, на 2-й код CSS, ну а на последней — как всегда результат. Это работает, как если бы первая вкладка была файлом index.html, вторая — файлом style.css, а третья браузером. Так вот, сейчас в нашем CSS написано, что все элементы с тегом img имеют ширину 100%. Размеры атрибутов width и height по умолчанию в пикселях, поэтому здесь не надо дописывать никаких единиц.
Разница в результате на лицо ��
Также в старых версиях html использовались такие атрибуты:
align, с помощью которого выравнивалось изображение по горизонтали или вертикали.
hspace — отступ слева и справа от изображения до окружающего контента (напр. текста или соседней картинки)
vspace — отступ сверху и снизу от картинки до контента вокруг.
border — задавал толщину рамки вокруг изображения (по умолчанию она равна нулю)
Сейчас все эти манипуляции (и гораздо больше) делаются с помощью CSS, поэтому мы решили здесь не забивать вам этим голову. Если все же интересно, как работать с этими атрибутами — пишите в комментариях, мы добавим этот пункт ��
Размещение картинки в коде
От того, где мы расположим наш тег <img> зависит то, как он будет отображаться в браузере.
Пример №1 — перед параграфом:
Такие элементы как <p> и <h2> относятся к блочным элементам. Они всегда начинаются с новой строки и занимают всю доступную ширину окна браузера. Если сначала разместить <img>, а после него блочный элемент, например параграф, то он будет перенесен на следующую строку.
Пример №2 — в начале параграфа
<img> это встроенный элемент, он помещается внутри блочного и не начинает новую строчку. В примере выше текст обтекает изображение, так как код <img> прописан внутри <p>
Подписи к иллюстрациям
Чтобы пометить или подписать фото на странице используется тег <figure> (от английского figure — рисунок). Этот тег указывает на то, что внутри него помещается контент типа иллюстраций, фотографий, диаграмм и т.п.
Тег <figcaption> (заголовок рисунка) позволяет добавить подпись к изображению. Вот как это работает:
Обратите внимание, что по умолчанию у браузера существуют некоторые настройки стиля для тега <figure>, в частности слева и справа есть отступы по 40 px.
Итак, мы с вами научились
- добавлять изображение на страницу: с помощью тега <img>
- узнали обязательные атрибуты для этого тега: src для указания пути и alt для описания картинки
- поняли какой формат лучше для чего использовать: jpeg для фотографий, png для логотипов и скриншотов, gif для анимации
- как лучше задать картинке размеры: с помощью атрибута style с параметрами width и height
- разобрались как будет отображаться картинка в зависимости от места в коде: отдельно, если перед блочным элементом и с обтеканием, если внутри блочного элемента (например <p>)
А чтобы нам было с чем работать, нужно откуда-то взять эти изображения, при этом не нарушив ничьих авторских прав.
Значит, пришло время бонуса ��
Список бесплатных фотобанков
Прежде, чем начнём, обратите внимание, что каждый скриншот здесь — это ссылка на сайт. Как делать изображения в виде ссылок, читайте в статье «Ссылки».
На pixabay вы найдете 680 тыс. бесплатных изображений на любую тематику, которые распространяются по лицензии Creative Commons CСО (CC Zero), т.е. их можно использовать, распространять, изменять в любых целях, даже коммерческих.
В фотобанке freeimages 390 тыс. бесплатных фото и картинок. Здесь сложнее найти крутой имидж, но тоже попадаются неплохие экземпляры. Порядком отвлекает реклама платных фотобанков. Мы поставили этот ресурс на второе место из-за количества изображений, но по дружелюбности он будет пожалуй на последнем в нашем рейтинге.
У фотостока morguefile более 250 тыс. бесплатных фотографий, в основном высокого качества. Можно скачивать даже без регистрации. Доступен только на английском.
На unsplash множество стильных фотографий под лицензией CC Zero. Можно качать без регистрации. Этот фотобанк тоже поймет вас только по английски.
Сайт designerspics создан Индийским веб-дизайнером, который понимает, как тяжело бывает найти качественное фото. Все фотографии сняты лично им, и с ними можно делать что угодно. Любит фотографировать еду, рабочий стол, компьютеры и всякие предметы. Поиск — только на английском.
как задать положение рисунка
1. Inline. По умолчанию картинка является inline элементом, то есть простым языком отображается в общем потоке информации без переноса на новую строку. Обычно удобно при использовании маленьких картинок-иконок в тексте. Тут можно использовать:
— вертикальное выравнивание (vertical-align)
— padding
— margin
— Если все же нам надо на новой строке, тогде надо сделать перенос строки при помощи BR тега или использовать блочное позиционирование.
— Если нужно отцентровать изображение, надо заключиьт картинку в тег для которого задано центрование текста, например:
2. Block (также сюда отнесем float) элементы. Наиболее применяемый практически. Варианты выравнивания:
— обтекание текстом (float, padding, margin)
— просто блочное позиционирование (display)
3. Абсолютное позиционирование. Объект отображается вне основного потока информации, попросту — располагается над/под элементами (тегами) родительского RELATIVE позиционированного контейнера (тег body является таким по-умолчанию).
—————
* помним о совместимостях
* ну и конечно лучше всего выносить css в отдельный файл и испольовать классы.
ссылки на свойства
— vertical-align
— margin
— padding
— float
— display
— position и positioning
Три способа выравнивания html картинки по центру
В этой статье мы разберем три простых техники, с помощью которых мы можем выровнять html картинки по центру экрана. Для урока я создал простую html страничку с базовой разметкой и пустой css файл.
Изображения в HTML-документе
Изображения на сайте значительно улучшают его внешний вид, оживляют сайт и отображают визуально представленную информацию. Редкий сайт удержит посетителя, если на нем представлен только текст. Изображения в HTML-документе могут легко позиционироваться и подвергаться дополнительной настройке с помощью тегов и атрибутов.
Вставка изображений в html-документ
Для загрузки изображения используется тег img, при этом указывается абсолютный или относительный путь к файлу. Указав относительный путь, картинка должна быть сохранена в папке с сайтом в подпапке с изображениями.
<img src=»http://www.spinch.net.ua/images/pict.jpg»> — изображение в папке images
<img src=»http://pictures.com/kartinka.jpg»> — картинка на другом сайте
После загрузки картинки, её размер можно изменить, с помощью атрибутов ширины (width) и высоты (height):
<img src=»http://www.spinch.net.ua/images/pict.jpg» width=»200″ height=»150″>
Кроме вставки в контенте, изображение может являться фоном сайта. Для этого его нужно указать в теге body с помощью атрибута background:
Позиционирование изображения в тексте
После вставки изображения, его нужно позиционировать в тексте, для этого применяется атрибут align.
<img src=»http://www.spinch.net.ua/images/pict.jpg» align=»left»>
После этого изображение выравняется слева от текста, так как указано значение left, чтобы выровнять справа — указать значение right. Также текст может располагаться вверху (top), внизу (bottom) или посередине (middle) относительно картинки.
После выравнивания изображения и текста обычно требуется установить отступ между ними. Это можно сделать с помощью атрибутов hspace и vspace:
<img src=»http://www.spinch.net.ua/images/pict.jpg» vspace=»10″> — отступ по вертикали
<img src=»http://www.spinch.net.ua/images/pict.jpg» align=»left» hspace=»10″> — по горизонтали
Для прерывания обтекания изображения можно воспользоваться тегом br с атрибутом all:
<img src=»http://www.spinch.net.ua/images/pict.jpg» align=»left»> Начало <br clear=»all»> текст.
После тега br, текст остановит обтекание и окажется под рисунком.
Дополнительные операции с изображениями
К картинке принято устанавливать описание, которое покажется при наведении:
<img src=»http://www.spinch.net.ua/images/pict.jpg» alt=»картинка»>
По умолчанию изображению задается рамка со значением 1, чтобы её убрать следует установить значение 0
<img src=»http://www.spinch.net.ua/images/pict.jpg» border=»0″>
Чтобы узнать как установить ссылку на изображение читайте следующую статью.
Картинки CSS/HTML
Простые подсказки по CSS по изображениям, из которых можно узнать, как сделать картинку ссылкой, скруглить углы и добавить фильтры. А так же как сделать изображение адаптивным, задать ширину и многое другое.
Как задать фоновое изображение в CSS
Для того, чтобы задать фоновое изображение нужно использовать свойство background для того элемента, которому нужно задать фон картинкой. Фон можно сделать повторяющимся, либо нет.
Пример
Затемнение изображения с помощью CSS
Такой способ затемнения изображения можно использовать для элементов сайт, а так же можно оформить для фона сайта, либо для отдельных разделов сайта.
Пример
Как добавить картинку на сайт html с размерами
Для того чтобы добавить картинку на свою веб-страницу или сайт можно применить тег , его атрибут src содержит путь к файлу, как правило, в формате PNG, JPEG или SVG. Также для необходимо указать обязательный атрибут alt, он устанавливает альтернативный текст, который описывает содержание картинки, другими словами в него вписываем то, что отображает картинка. Размеры для изображения можно задать как в пикселях, так и в процентах, более подробно о размерах можно посмотреть на примере.