Внимание! Статья на переработке. Прежний вариант был перенесён сюда в связи с более подходящим заголовком.
Как сделать надпись под картинкой
Кроме содержания атрибутов alt и title при поиске по картинкам используются тексты, находящиеся в непосредственной близости от изображения. Часто это выглядит как:
<!-- HTML5, подходит для резинового дизайна --> <style> figure.img { margin: 0; text-align: center; } figure.img img { /* изображение уменьшается пропорционально экрану браузера */ max-width: 100%; height: auto; } figure.img figcaption { /* стиль описания */ padding: 0 1%; font: italic 90% Georgia,serif; } </style> <figure class="img"> <img alt="котёнок мечтает стать львом" src="http://4.bp.blogspot.com/-uXTQrdgmR5A/TVOtm4AfAzI/AAAAAAAABcA/ZPY0DjhgY0o/s00/mechty.jpg" height="400" width="302"> <figcaption>Когда-нибудь котёнок выберется из лужи</figcaption> </figure>
Автоматическая нумерация картинок
К стилю выше дописать [доп.информация про счётчики CSS]:
body { counter-reset: figures; } figure.img figcaption { counter-increment: figures; } figure.img figcaption:before { content: 'Рис.' counter(figures) ' '; }
Изображение с подписью в рамке
Общий CSS стиль:
<style> figure.img { max-width: 100%; margin: 0 auto; box-shadow: 0 0 0 5px #fff, 0 0 4px 5px; /* рамка (она же отступ и тень) блока */ } figure.textizo { width: fit-content; /* ширина блока (рисунок+описание) = ширине описания или фото, в зависимости от того, чьё значение больше; нужен -moz- и -webkit- */ } figure.izo { width: min-content; /* ширина блока (рисунок+описание) = ширине изображения; нужен -moz- и -webkit- */ } figure.img img { display: block; max-width: 100%; height: auto; margin: 0 auto; } figure.img figcaption { max-width: 100%; padding: 0 1%; font: italic 90% Georgia,serif; } </style>
Текст длиннее изображения. Если картинка располагается по центру, то хочется использовать всё пространство родительского блока.
<figure class="img textizo"> <img alt="котёнок мечтает стать львом" src="http://4.bp.blogspot.com/-uXTQrdgmR5A/TVOtm4AfAzI/AAAAAAAABcA/ZPY0DjhgY0o/s00/mechty.jpg" height="400" width="302"> <figcaption>Когда-нибудь котёнок выберется из лужи</figcaption> </figure>
Когда нужно чтобы ширина контейнера была не больше ширины картинки (для Google Chrome см. код ниже, для него нужно обязательно указывать width для figcaption ?!).
<figure class="img izo"> <img alt="котёнок мечтает стать львом" src="http://4.bp.blogspot.com/-uXTQrdgmR5A/TVOtm4AfAzI/AAAAAAAABcA/ZPY0DjhgY0o/s00/mechty.jpg" height="400" width="302"> <figcaption>Когда-нибудь котёнок выберется из лужи</figcaption> </figure>
Если изображение узкое и маленькое и обтекается слева или справа, а текст длинный, то следует ограничить ширину описания.
<figure class="img izo"> <img src="http://4.bp.blogspot.com/-eJraU5lCufs/UFa8PpMUv8I/AAAAAAAADLQ/Y5SGHBd91-Q/s1600/smail-bolshoi-palets-vverh.gif" alt="Смайлик большой палец вверх" height="104" width="147"/> <figcaption style="width: 300px;">Длинное, очень длинное, длинное-предлинное описание</figcaption> </figure>
HTML подпись под картинкой, появляющаяся после наведения курсора мышки
К CSS выше добавить:
figure.hover { position: relative; } figure.hover figcaption { position: absolute; left: 0; top: calc(100% + 5px); width: available; /* 100% минус горизонтальные margin, border и padding; нужен -moz- и -webkit- */ visibility: hidden; background: #fff; box-shadow: 0 0 0 5px #fff, -5px 0 4px, 5px 0 4px, 0 5px 4px; } figure.hover:hover figcaption { visibility: visible; }
<figure class="img izo hover"> <img alt="котёнок мечтает стать львом" src="http://4.bp.blogspot.com/-uXTQrdgmR5A/TVOtm4AfAzI/AAAAAAAABcA/ZPY0DjhgY0o/s00/mechty.jpg" height="400" width="302"> <figcaption style="width: 302px;">Когда-нибудь котёнок выберется из лужи</figcaption> </figure>
Несколько фотографий и одно описание
Про тег figure и figcaption хорошо написано у html5doctor.com: статья 1 (в комментариях тоже можно найти интересные моменты), статья 2, а также следует прочитать первоисточник w3.org. Словом, так тоже будет верно:
<style> figure.img { max-width: 100%; } figure.izo { width: min-content; margin: 0 auto; } figure.tri figure { width: 100%; margin: 0; letter-spacing: 6px; white-space: nowrap; } figure.img img { height: auto; margin: 0 auto; } figure.tri img { display: inline-block; max-width: calc(100%/3 - 4px); /* с учётом того, что фото одинаковой ширины, иначе JavaScript */ } figure.img figcaption { max-width: 100%; padding: 0 1%; font: italic 90% Georgia,serif; } </style> <figure class="img izo tri"> <figure> <img alt="котёнок мечтает стать львом" src="http://4.bp.blogspot.com/-uXTQrdgmR5A/TVOtm4AfAzI/AAAAAAAABcA/ZPY0DjhgY0o/s00/mechty.jpg"> <img alt="гадкий утёнок смотрит в лоханку" src="http://1.bp.blogspot.com/-zieFTVCUOhk/UrLBvVdmQnI/AAAAAAAAEOg/_HXG_LQSpfE/s320/gadkiy-utenok.jpg"> <img alt="гадкий утёнок смотрит в воду, он стал лебедем" src="http://4.bp.blogspot.com/-R4BCZt_KHWY/UrLAiZDDnzI/AAAAAAAAEOQ/U2WFegtrfi8/s00/gadkii-utenok.jpg"> </figure> <figcaption>Когда-нибудь котёнок выберется из лужи. По крайне мере одному уже удалось из гадкого утёнка превратиться в величавую птицу</figcaption> </figure>
14 комментариев:
Жаль что этого не хотят решить разработчики Блоггера.
http://stylistjournal.blogspot.ru/
А ниже, после
<figure class="img">
,включительно, это нужно добавлять в тело сообщения на вкладке HTML.
Сначала потренируйтесь, весь код целиком добавьте в сообщение на вкладке HTML.
Я пишу всю статью с включенным режимом HTML, мне не составит труда пару строк. А вам не думаю, что будет сподручно каждый раз переключаться.
"котёнок" - это ребёнок, а в некоторых случаях и более объемлющее значение: человек.
"лужа" - это психологические (и только, т.к. всё остальное пляшет от психики человека) рамки, в которые загоняют котёнка с момента его появления на свет (и хуже всего то, что в большей степени это делают его родители на подсознательном уровне, т.к. сами росли в таких же рамках).
Отсюда рождается следующее:
Зачем загонять котёнка в лужу самОй постановкой изначального предложения? Ведь даже неоднозначное наречие "когда-нибудь" уже внедряет в подсознание котёнка возможность "вечного" пребывания в луже, т.к. есть вариант, что "когда-нибудь" никогда не случится (котёнок может просто умереть несколько раньше)..
ПС: это я так, лирика..))