Адаптивное фото, с текстом, поверх фото?

Question

[Павел Рябов]

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

Answer 1

[Сергей Горячев]

Например так.
https://jsfiddle.net/87wu41ep/

Comments

[Павел Рябов]

А как же ее центрировать?

[Сергей Горячев]

Павел Рябов: https://jsfiddle.net/87wu41ep/1/ как-то так.

[Павел Рябов]

Сергей Горячев: Я не про текст, а про фотографию. У меня никак не получается.

[Сергей Горячев]

Павел Рябов: не совсем понятен твой вопрос.

[Павел Рябов]

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

Answer 2

[Максим]

Размеры изображения заранее известны ?

Comments

[Павел Рябов]

Да, 1360 х 1262. Но это разве полезно?

[Максим]

Павел Рябов: ну как бы конечно полезно ... вот представьте что ваше изображение смотрят через интернет с мобильного средства или с apple сафари или с какого не будь древнего нетбука коих щас очень много .. надо учитывать всё
В итоге для изображения display:block; max-width:100%;height:auto; но так же создать для каждого отдельного изображения блок-обёртку с нужными размерами и с position:relative и абсолютным позиционированием расположить вашу нужную надпись , хотя есть и тег caption

[Павел Рябов]

Максим Ленский: для каждого отдельного изображения? У меня только одно изображение, это сайт на один раз, я просто хочу на примере понять использование адаптивного изображения с текстом.

[Максим]

Павел Рябов: ну значит один раз оберни и дай блоку этому размер хоть в процентах хоть в пекселях