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

Картинки друг под другом

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

Связи

Разделы сайта

Популярное

• Уроки по HTML и CSS
• Руководство по флексбоксам
• HTML5 и CSS3 на примерах
• Руководство по JSON
• Как верстать на HTML5 и CSS3
• Продвинутые уроки по HTML и CSS
• Визуальное руководство по свойствам flexbox
• Создание первого приложения на Node

Помощь по сайту

Сайт WebReference.ru использует VPS от компании Beget.

Как разместить слитно два изображения друг под другом?

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

Решение

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

Для начала рассмотрим способ применения тега
, который отвечает за создание переноса. Этот тег достаточно добавить сразу же после первого тега , как показано в примере 1. Здесь, однако, кроется одна хитрость. При строгом режиме браузера (в HTML5 или при строгом в HTML4 или XHTML) между изображений возникает пустой промежуток, убрать который поможет свойство line-height , его следует указать для контейнера, в котором хранятся изображения, обычно это тег

или .

Пример 1. Использование тега

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1. Изображения располагаются внутри контейнера

и разделяются тегом
. Для состыковки изображений без пробелов в стилях указывается свойство line-height со значением 1px. Те же рисунки без состыковки показаны на рис. 2.

Рис. 1. Два изображения, состыкованные по вертикали

Рис. 2. Промежуток между изображениями

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

.img img

Можно обойтись и без тега
, поместив изображения в блок фиксированной ширины, значение которой совпадает с шириной рисунков. Перенос изображений друг под друга произойдет автоматически (пример 2).

Пример 2. Фиксированная ширина

HTML5 CSS 2.1 IE Cr Op Sa Fx

В браузере Internet Explorer 6 и 7 в результате выполнения данного примера возможно появление промежутка между изображениями. Известная ошибка этого браузера решается просто. Достаточно теги в коде примера записать в одну строку без пробелов и переносов.

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

Не могу разместить картинки друг от друга как на фото Пока вышло только так: HTML

#header < position: relative; width: 100%; height: 501px; background: url(../img/header2.jpg); >#inner_wrap_logo

Отслеживать
задан 12 ноя 2016 в 15:26
652 1 1 золотой знак 7 7 серебряных знаков 21 21 бронзовый знак

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

#header < position: relative; width: 100%; height: 501px; background: url(http://conceptartworld.com/wp-content/uploads/2013/09/Tank_Concept_Art_by_Chad_Weatherford_01.jpg); >#inner_wrap_logo

Отслеживать
ответ дан 12 ноя 2016 в 15:39
4,044 1 1 золотой знак 11 11 серебряных знаков 20 20 бронзовых знаков
#inner_wrap_logo нужно задавать overflow: hidden; или clearfix
12 ноя 2016 в 16:18
@ElenaSemenchenko зачем?
12 ноя 2016 в 16:23
Затем, что внутри плавающий блок второе изображение img
12 ноя 2016 в 16:27

Вариант 1 flex:

#header < position: relative; width: 100%; height: 501px; background: url(../img/header2.jpg); >#inner_wrap_logo

Вариант 2 float:

#header < position: relative; width: 100%; height: 501px; background: url(../img/header2.jpg); >#inner_wrap_logo < margin: 0 auto; width: 960px; height: 100%; overflow: hidden; >#inner_wrap_logo img:first-of-type < float:left; >#inner_wrap_logo img:last-of-type

Отслеживать
ответ дан 12 ноя 2016 в 15:38
22.4k 10 10 золотых знаков 56 56 серебряных знаков 120 120 бронзовых знаков

Html

 
Text 1
 
Текст 2
 

#one, #two

Отслеживать
ответ дан 12 ноя 2016 в 15:41
1,536 1 1 золотой знак 11 11 серебряных знаков 27 27 бронзовых знаков

• html
• css

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.9.3159

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

Размеры и позиционирование изображений на веб-страницах

Вспомним, что для добавления файлов изображений на веб-страницу используется одиночный тег с атрибутами:

Атрибуты ширины и высоты можно опустить, если размер задается с помощью одноименных свойств CSS.

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

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

img src="linuxhistory.png"  alt="История Linux"  width="100%" height="auto">

Значение auto для height заставляет высоту изображения масштабироваться пропорционально ширине.

То же самое через css-правило:

img { width: 100%; height: auto; } … img src="linuxhistory.png" alt="История Linux">

Или встроенный в элемент стиль:

img src="linuxhistory.png" alt="История Linux" style="width:100%;height:auto">

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

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

Наиболее простым способом решения проблемы является использование css-свойства max-width со значением в процентах и с одновременным указанием размера изображения в пикселях в атрибутах элемента img .

В этом случае max-width растягивает картинку на всю ширину внешнего блока при условии, что размер этого блока не превышает размера изображения. Когда это не так, срабатывают значения атрибутов длины и ширины тега.

Ранее (см. урок 3), когда речь шла о блочных и строчных элементах, то для выравнивая отдельно стоящего изображения по центру приводился пример помещения его в блок div или figure . Однако мы можем сделать само изображение блочным элементом с помощью объявления display: block . После этого центрировать его с помощью margin: auto .

img { display: block; margin: 0 auto; max-width: 100%; height: auto; } … img src="gnu.png" alt="Логотип GNU" width="491" height="480">

Бывает, что маленькие картинки предпочитают обтекать текстом слева или справа. Для этого используют свойство float со значением left или right . В случае float: left элемент будет «уплывать» налево. Другие элементы будут оказываться справа от него.

Здесь может потребоваться решать две проблемы:

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

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

p style="clear:left;">Самым известным …/p>

Объявление clear: left заставляет элемент перестать обтекать объекты, расположенные с левой стороны. Вариант clear: both – с обоих сторон. В нашем примере значение both дало бы тот же результат.

Чтобы убрать обтекание изображений на малых экранах, потребуется использовать @media-запрос, в котором значения свойств будут меняться. Однако если мы до этого оформляли элемент через атрибут style тега, то такой inline-стиль (строчный) имеет приоритет над внешней или внутренней таблицей стилей.

Поэтому в нашем случае понадобится использовать команду !impotant :

@media (max-width: 599px) { img { float: none!important; padding: 0!important; display: block; margin: 0 auto; max-width: 100%; height: auto; } }

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

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

X Скрыть Наверх

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