Как создать подпись под отзывчивым изображением

-1

Вот наш тест. http://www.photoeye.com/test1/test4.cfm Как создать подпись под отзывчивым изображением

Как создать подпись чуть ниже отзывчивого изображения? Благодарю.

2013-09-03 user2654985

http://www.w3.org/Style/Examples/011/firstcss.en.html – dokaspar

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

Как насчет использования <figcaption>, но вместо этого два вертикальных деления? Первое внутреннее <div> содержит изображение, второе внутреннее <div> содержит заголовок. Что-то вроде этого:

<div> 
    <div> 
     <img src="my_image.jpg"> 
    </div> 
    <div>My caption</div> 
</div>

источник

2013-09-03 06:11:41 dokaspar

Извините, это не работает с отзывчивыми изображениями. – user2654985

Может быть структура HTML5 поможет вам в этом, не забудьте добавить html5shiv в голове теге выше ...

CSS: -

.resp-adapt { position:relative; } 
.resp-adapt img { width:100%; margin-bottom:-2px; } 
.resp-adapt figcaption { position:absolute; bottom:0; left:0; width:100%; background-color:rgba(0,0,0,0.5); } 
.resp-adapt a { color:#fff; display:block; padding:10px; }

HTML: -

<figure class="resp-adapt"> 
    <img src="xyz.jpg" alt="Image"> 
    <figcaption> <a href="#">Caption Link</a> 1</figcaption> 
</figure>

Fiddle Demo

источник

2013-09-03 06:41:35 SaurabhLP

Нет сожаления. Это то, что происходит, когда я помещаю этот код в действие. обратите внимание, что заголовок не отображается под отзывчивым изображением, а над ним. http://www.photoeye.com/test1/test4.cfm – user2654985

здесь его рабочий http://jsfiddle.net/TBbNE/show/ – SaurabhLP

Закрыть, но он по-прежнему обрезается браузером по вертикали. Изображение и заголовок должны всегда оставаться видимыми в окне браузера. Ничто не может быть обрезано горизонтально или вертикально. – user2654985

Как создать подпись под отзывчивым изображением

ответ

Смежные вопросы