Картинка выше ниже: Картинки высокий низкий для дошкольников и младших школьников.
Выравнивание картинок | WebReference
Главная Вёрстка HTML5 и CSS3 на примерах Изображения Выравнивание картинок
В зависимости от положения изображения различают разные способы их выравнивания. Так, рисунок может выравниваться по правому или левому краю окна браузера или, если он встраивается непосредственно в текстовую строку, по базовой линии текста.
Обтекание изображения текстом
Выравнивание изображения с одновременным обтеканием его текстом — один из популярных приёмов вёрстки веб-страниц, когда изображение располагается по краю окна браузера, а текст обходит его с разных сторон. Для создания обтекания изображения текстом существует несколько способов, самый удобный, конечно же, связан с применением стилей.
Для обтекания картинки текстом применяется стилевое свойство float. Значение right будет выравнивать изображение по правому краю родительского элемента или окна браузера, а текст размещать слева от рисунка.
Пример 1. Применение float
<!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>Изображения</title> <style> figcaption { text-align: center; } .left { float: left; /* Выравнивание по левому краю */ margin: 0 1em 1em 0; /* Отступ справа и снизу */ } .right{ float: right; /* Выравнивание по правому краю */ margin: 0 0 1em 1em; /* Отступ снизу и слева */ } </style> </head> <body> <figure> <img src=”image/fig.jpg” alt=””> <figcaption>Подпись снизу</figcaption> </figure> <p>Текст</p> </body> </html> В данном примере вводится два класса с именами left и right, добавление которых к элементу <img> или <figure> выравнивает их по соответствующему краю. Чтобы текст немного отступал от картинки добавляется универсальное свойство margin. На рис. 1 показано выравнивание по левому краю.Рис. 1. Выравнивание фотографии по левому краю
Выравнивание рисунка относительно текста
Картинки можно добавлять непосредственно в текст и управлять их положением относительно текста с помощью свойства vertical-align. По умолчанию картинка выравнивается по базовой линии — это невидимая горизонтальная линия, проходящая по нижнему краю символов. Некоторые буквы (д, р, у, ф, ц, щ) содержат нижний выносной элемент, выходящий за базовую линию (рис. 2).
Рис. 2. Базовая линия
Если просто вставить рисунок посередине строки, то он будет выглядеть следующим образом (рис. 3).
Рис. 3. Картинка, выровненная по базовой линии текста
В примере 2 все изображения внутри абзаца <p> выравниваются посередине текста, для этого в качестве значения применяется middle.
Пример 2. Выравнивание картинки относительно текста
<!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>Изображения</title> <style> p img { vertical-align: middle; } </style> </head> <body> <p>Вид самой кривой изменяется с помощью инструмента карандаш <img src=”image/pen. png” alt=””>.
Для создания прямых отрезков устанавливайте точки удерживая
клавишу Shift.
</p>
</body>
</html>Результат данного примера показан на рис. 4. Заметьте, как изменилось положение верхней строки с картинкой.
Рис. 4. Картинка, выровненная по середине текста
изображения
См. также
- <img>
- <picture>
- float
- float в CSS
- vertical-align
- Атрибуты элементов
- Блочные элементы
- Буквица
- Верхний и нижний индекс
- Влияние float
- Добавление медиа-контента
- Изображения
- Изображения
- Изображения в HTML
- Масштабирование картинок
- Описание float
- Подрисуночная подпись
- Подробнее о позиционировании
- Поток
- Примеры использования float
- Фон в CSS
- Форматы графических файлов
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 11. 03.2020
Редакторы: Влад Мержевич
Подрисуночная подпись
Ctrl+←
Рамка вокруг изображений
Ctrl+→
Наложение и порядок слоёв | htmlbook.ru
На веб-странице расположены три изображения игральных карт (рис. 3.51). Пока они лежат рядом, их порядок значения не имеет, но если применить к ним позиционирование и сместить изображения так, чтобы они накладывались друг на друга, одна карта будет находиться выше другой (рис. 3.52).
Рис. 3.51. Карты рядом друг с другом
Рис. 3.52. Карты одна на другой
Если представить веб-страницу в виде трёхмерного пространства (рис. 3.53), то видно, что карты располагаются также по оси Z. Значения по этой оси и определяют, какая карта к нам ближе, какая дальше, иными словами порядок их наложения друг на друга. В коде документа (пример 3.38) порядок определяется автоматически на основе потока документа. Чем элемент ниже в коде, тем он выше по оси Z, поэтому изображение с тузом, как самое нижнее, располагается поверх остальных карт.
Рис. 3.53. Воображаемые координаты веб-страницы
Пример 3.38. Обычный порядок карт
XHTML 1.0CSS 2.1IECrOpSaFx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Порядок карт</title>
<style type="text/css">
.card IMG { position: relative; }
.seven { left: -120px; top: 25px; }
.ace { left: -240px; top: 50px; }
</style>
</head>
<body>
<p>
<img src="images/3.png" alt="3" />
<img src="images/7.png" alt="7" />
<img src="images/ace.png" alt="Туз" />
</p>
</body>
</html>В CSS за положением по Z-оси отвечает свойство z-index, которое определяет, «ближе» к нам элемент находится или «дальше». В качестве значений принимается целое число, чем оно больше, тем выше располагается элемент по отношению к другим.
.card IMG { position: relative; }
.three { top: 50px; left: 55px; z-index: 5; }
.seven { left: -120px; top: 25px; z-index: 2; }
.ace { left: -295px; z-index: 1; }Свойство z-index для класса three специально установлено как 5 для демонстрации, что последовательность значений z-index роли не играет. Главное, чтобы одно число было больше другого.
Свойство z-index работает только для элементов, у которых значение position задано как absolute, fixed или relative.
Когда требуется расположить элемент поверх всех остальных на странице, ему ставят очень большое значение z-index, например 9999. Это гарантирует, что даже если в стилях и применяется z-index, он будет меньше указанного. В примере 3.39 у карт при наведении на них курсора меняется z-index на 10.
Пример 3.39. Изменение z-index при наведении на карту
XHTML 1.0CSS 2.1IECrOpSaFx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Порядок карт</title>
<style type="text/css">
.card IMG { position: relative; }
.three { top: 50px; left: 55px; z-index: 5; }
.seven { left: -120px; top: 25px; z-index: 2;}
.ace { left: -295px; z-index: 1; }
.card IMG:hover { z-index: 10; }</style>
</head>
<body>
<p>
<img src="images/3.png" alt="3" />
<img src="images/7.png" alt="7" />
<img src="images/ace.png" alt="Туз" />
</p>
</body>
</html>- z-index
- Псевдокласс :hover
text – Должно ли описание изображения быть над ним или под ним?
спросил
Изменено 4 года, 6 месяцев назад
Просмотрено 20 тысяч раз
Есть много мест, где мы должны поместить изображение одно под другим и написать их описание в строке или около того. Где должен быть текст описания? выше его или ниже?
Я знаю, что лучше всего положить его сбоку, но иногда это просто невозможно. Какой из них, если бы вам пришлось выбирать между этими двумя?
- текст
- изображение
- позиция
- Чтобы создать связь между изображением и описанием , используйте принцип близости из набора гештальт-принципов, предоставляя меньше места для соединения элементов и больше пространства между фрагментами информации для разделения . Это дает хорошие результаты как для размещения выше, так и ниже описания.
Чтобы поддерживал поток потребления информации , используя человеческое восприятие, я бы рекомендовал использовать описание под изображением.
Поскольку изображение является более привлекательным элементом и распознается быстрее, чем текст, оно служит точкой входа. Затем, следуя схеме чтения сверху вниз, приводится описание.
Размещение описания над изображением может создать «точку принятия решения» и приостановить поток, так как для чтения описания пользователь должен подняться вверх, а следующее изображение, которое находится ниже, привлекает внимание пользователя.
2
Принцип близости должен быть первым соображением. После этого это также может зависеть от среды использования.
Блоги, газеты и книги например почти всегда имеют заголовок под изображением. Это, вероятно, связано с тем, что изображения предназначены для предоставления вспомогательного материала для общего содержания произведения. Таким образом, вы можете прочитать абзац, увидеть вспомогательный контент (изображение) и его релевантность, а затем продолжить чтение.
Сайты, содержащие большую часть изображений , совершенно естественно используют заголовки в качестве описаний и размещают их вверху. Пример, который сразу приходит на ум, — 9GAG. Это также связано с тем фактом, что он дает представление о том, что представляет собой изображение, прежде чем пользователь просматривает его.
Другим примером может быть сам этот ответ. Описание перед изображением, чтобы вы поняли, что изображение пытается передать.
0
На этот счет нет строгих правил. Я сталкивался с обоими способами размещения описаний.
Вам просто нужно убедиться, что между разными изображениями есть достаточное расстояние и что описание ближе к изображению, которое оно описывает:
[image1] Описание1 ...достаточно пустого места или даже какой-то разделительной строки ------------------------------- [изображение2] Описание2 ...
С другой стороны, я всегда нахожу более очевидным, когда описание идет первым и заканчивается двоеточием — таким образом пользователь логически ожидает, что изображение будет сразу после текста. Вот так:
Здесь вы видите image1: [изображение1] А на этом изображении показан второй: [изображение2] ...
1
загрузить исходный код bmml — Каркасы, созданные с помощью Balsamiq Mockups
Лично я предпочитаю приведенный ниже текст, но это личное предпочтение, и здесь нет правильного или неправильного ответа. Это зависит от многих факторов, включая ваш контент, ваши предпочтения, изображение и т. д.
Попробуйте оба способа в своем конкретном проекте и посмотрите, какой из них вам подходит. Пока он достаточно близок к изображению, чтобы ассоциироваться с ним в сознании пользователей, вы будете в безопасности. Я знаю, что многие сайты используют рамку или фон как для подписи, так и для изображения, чтобы они были четко связаны друг с другом.
загрузить источник bmml
Опять же, здесь нет правильного или неправильного ответа. Это зависит от ваших предпочтений, и вы должны попробовать оба, чтобы увидеть, что лучше всего подходит вам и лучше всего подходит для вашего контента. Просто убедитесь, что изображения и подписи расположены близко друг к другу, чтобы они были связаны друг с другом (я постоянно повторяю это, но это потому, что это важно).
Ключевым фактором является функция изображения и соответствующее отношение к тексту. Текст, служащий описанием изображения, всегда должен располагаться под изображением, потому что это описание изображения, то есть изображение является источником контекста.
По той же причине изображения размещаются под заголовками. В случае новостной статьи заголовок является контекстом, а изображение предоставляет дополнительную информацию через визуальное описание.
Другими словами, сначала контекст, а потом описание. Это касается как текста, так и изображений.
Зарегистрируйтесь или войдите в систему
Зарегистрироваться с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя адрес электронной почты и пароль
Опубликовать как гость
Электронная почта
Обязательно, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания, политикой конфиденциальности и политикой использования файлов cookie
. Макет. Что с большей вероятностью будет прочитано и обработано: (связанный) текст, размещенный над или под изображением/видео?
спросил
Изменено 10 лет, 10 месяцев назад
Просмотрено 7к раз
Я думаю о вёрстке на страницах, где главный актив визуальный — например, фото предмета из коллекции на сайте музея или встроенное видео, как на ютубе и многих новостных сайтах. Иногда заголовок или другая краткая важная информация дается над видео (как на YouTube), а иногда текст, который задает контекст для изображения, отображается непосредственно под ним (как в подписях к картинкам на новостных сайтах). В идеале вы хотите, чтобы люди читали текст, который представляет и/или резюмирует фото или видео; скорее всего, это будет не более одной или двух строк текста. Это может быть название или просто объяснение объекта и его контекста.
F-шаблон для чтения предполагает (что неудивительно), что англоговорящие люди начинают читать с верхней части страницы, а затем продвигаются вниз горизонтальными полосами, поэтому размещение заголовка над изображением имеет смысл из-за «установки контекста». ” — утверждение, что контент в верхней части страницы привлекает больше внимания, чем то, что находится внизу, вряд ли будет спорным. Однако мозг значительно быстрее обрабатывает изображения, чем текст, что может означать, что мы заканчиваем обработку содержимого изображения до того, как закончим обработку слов, даже если слова отображаются первыми на странице. В макете страницы также есть целая штука, когда изображения и пустое пространство направляют взгляд — например, cogapp.com, похоже, действительно хорошо помогает направлять взгляд вниз по странице к заявлению о том, что они делают. Поэтому я не знаю, насколько легко говорить об этом абстрактно, так как в какой-то степени это также будет зависеть от визуального дизайна.
В любом случае, мой вопрос: есть ли веские доказательства того, предпочтительнее ли размещать связанный текст над или под изображением, с точки зрения того, чтобы заставить людей читать и обрабатывать слова? (Я не уверен, будет ли считаться простая фиксация на словах; я хочу знать, что они действительно осмысленно обработали письменный контент 🙂
- макет
- изображение
- текст
- ярлыки
3
Это так называемые «линии разреза», которые десятилетиями использовались в газетной индустрии с текстом ПОД изображением. Я бы придерживался этого.
1
Я скажу, что в традиционном печатном формате изображение отделено от основного текста (обычно вверху или сбоку) с подписью под изображением .
Это кажется естественным, вы видите изображение, а затем описание того, что именно происходит. Из заголовка или текста, ведущего к статье, у вас, вероятно, достаточно хорошее представление о том, каким будет изображение, то есть описание изображения в первую очередь.0138 обычно не нужен.
Однако цифровые средства массовой информации часто (но не в соответствии со строгим соглашением) помещают руководящую копию над изображениями , когда это соответствует смыслу статьи .
Например, я могу привести к изображению, которого вы совершенно не ожидали, например, к этой картинке «Кита-неудачника» в Твиттере:
В этом случае повествование требует описательного текста перед изображением. Это особенно подходит для стиля письма, когда автору 9 лет.0138 прямо показывает пользователю что-то , как будто я вручаю вам картинку «Вот, взгляните на это».
Во многих ситуациях это может быть неуместным и неожиданным; Подпись под изображением является обычной , и существуют условные обозначения, помогающие пользователям. Благодаря простому соблюдению соглашений вы избавите своих пользователей от путаницы и времени. Условности важны, особенно в «новых» формах медиа.
1
У меня нет веских доказательств, только пара предложений:
Придерживайтесь стандарта, копируйте своих коллег, это то, к чему привыкли ваши пользователи. Вы говорите как о видео, так и об изображениях, поэтому я не уверен, является ли ваш аналог cogapp.com или YouTube.com (с заголовками над видео).
Вы подчеркиваете важность текста над изображением. Я считаю, что макет текста имеет большее значение, чем его положение здесь, cogapp.com отлично справляется с белым текстом на черном фоне с достаточным отступом.
Учитывайте положение изображения/видео+текста на сайте. Если текст более важен, вы можете захотеть, чтобы он был виден без прокрутки. Пользователи не прокручивают и обычно имеют монитор меньшего размера, чем ваш.
Мое эмпирическое правило заключается в том, что заголовок должен быть однострочным и располагаться над изображением, а описание может быть многострочным и должно располагаться под изображением.
Надеюсь, это немного поможет.
2
Любой контент будет прочитан и обработан, если он правильно размещен и оформлен.
Это особенно важно в онлайн-публикациях, потому что контент раскрывается постепенно посредством прокрутки, в отличие от печатных СМИ, где конкретный физический размер позволяет читателям сразу увидеть весь контент. В результате при потреблении цифрового контента пользователю, скорее всего, потребуется прокрутить вниз, чтобы прочитать заголовок, затем вернуться вверх, чтобы продолжить чтение основного контента, а затем снова прокрутить вниз, чтобы пропустить изображение, которое разбивает текст. Более того, во многих онлайн-публикациях стиль подписей часто не отличается от основного текста, что еще больше сбивает с толку.
Поэтому я выделю следующее правило подписи к изображениям и видео в Интернете:
Если изображение/видео начинается выше сгиба и , высота, включая заголовок, меньше 600 пикселей (т. е. выше сгиба на экранах высотой 768 пикселей, включая хром браузера и заголовок) и , это единственное изображение/видео на странице, затем вы можете разместить подпись под ним.
Однако, если изображение/видео находится ниже сгиба или на странице есть другие изображения/видео, то заголовок должен быть размещен над ним, чтобы обеспечить согласованность и предотвратить путаницу пользователей. Кроме того, стиль подписей во всех случаях должен отличаться от основного текста.
1
Медиа-контент, особенно изображение, сразу же привлекает внимание пользователей, затем естественный поток должен двигаться вниз, что означает, что все, что выше (чаще всего панель навигации), игнорируется до тех пор, пока оно действительно не понадобится.