Как сделать картинку справа в html

Изображения в HTML-документе

izo-img Изображения на сайте значительно улучшают его внешний вид, оживляют сайт и отображают визуально представленную информацию. Редкий сайт удержит посетителя, если на нем представлен только текст. Изображения в HTML-документе могут легко позиционироваться и подвергаться дополнительной настройке с помощью тегов и атрибутов.

Вставка изображений в html-документ

Для загрузки изображения используется тег img, при этом указывается абсолютный или относительный путь к файлу. Указав относительный путь, картинка должна быть сохранена в папке с сайтом в подпапке с изображениями.

<img src=»http://www.spinch.net.ua/images/pict.jpg»> — изображение в папке images

<img src=»http://pictures.com/kartinka.jpg»> — картинка на другом сайте

После загрузки картинки, её размер можно изменить, с помощью атрибутов ширины (width) и высоты (height):

Кроме вставки в контенте, изображение может являться фоном сайта. Для этого его нужно указать в теге body с помощью атрибута background:

Позиционирование изображения в тексте

После вставки изображения, его нужно позиционировать в тексте, для этого применяется атрибут align.

После этого изображение выравняется слева от текста, так как указано значение 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, текст остановит обтекание и окажется под рисунком.

Дополнительные операции с изображениями

К картинке принято устанавливать описание, которое покажется при наведении:

По умолчанию изображению задается рамка со значением 1, чтобы её убрать следует установить значение 0

Чтобы узнать как установить ссылку на изображение читайте следующую статью.

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

Как сделать, чтобы к правому краю была прижата картинка, а слева от нее прижатый блок div?

И блоку, и картинке дать float:right; .

А можно одному дать float:left , а второму float:right; .

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

background-position¶

Свойство background-position задаёт начальное положение фонового изображения, установленного с помощью свойства background-image .

Допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.

Синтаксис¶

Значения¶

У свойства background-position два значения, положение по горизонтали (может быть — left , center , right ) и вертикали (может быть — top , center , bottom ). Кроме использования ключевых слов положение также можно задавать в процентах, пикселях или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задаётся положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее.

top left = left top = 0% 0% (в левом верхнем углу)
top = top center = center top = 50% 0% (по центру вверху)
right top = top right = 100% 0% (в правом верхнем углу)
left = left center = center left = 0% 50% (по левому краю и по центру)
center = center center = 50% 50% (по центру)
right = right center = center right = 100% 50% (по правому краю и по центру)
bottom left = left bottom = 0% 100% (в левом нижнем углу)
bottom = bottom center = center bottom = 50% 100% (по центру внизу)
bottom right = right bottom = 100% 100% (в правом нижнем углу)

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

Как разместить фоновую картинку в нужном углу?

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

Для определения позиции вашей фоновой картинки необходимо использовать команду background-position, но я вам советую применять универсальный оператор background, который отвечает за все параметры настроек фона, это сократит ваш код. Выбранное нами положение соответствует командам right bottom. То есть, мы говорим CSS, что хотим видеть нашу картинку внизу справа. Не забываем также указать значение no-repeat, что не позволит зациклить вывод фона на весь родительский контейнер.

От слов переходим к делу

Для того, чтобы текст не наплывал на наш фон, зададим правый отступ родительскому контейнеру через свойство padding-right. Также обращаю ваше внимание на высоту тега html. Это связано с тем, что мы задаем положение блока справа внизу, а чтобы то же самое происходило в окне браузера — нужно растянуть родителя на всю высоту окна.