Выровнять текст с другим текстом на изображении, в ответном макете

Question

У меня есть страница с image, которая содержит текст в ней. Существует текст за пределами изображения, который должен быть выровнен по правому краю с текстом внутри изображения. Я пробовал работать с процентами, которые работали на некоторые размеры, но не для всех.

Попытка выяснить, есть ли простой способ сделать это, что работает для всех и для гибкого макета тоже.

Пример:

Answer 1

Как это для вас? https://jsfiddle.net/n451c4ym/2/ нужно будет отрегулировать свойство «bottom» css, но с этой настройкой правая часть текста остается встроенной с фиксированным текстом на изображении ...

В принципе, вы даете родительскому положению относительное:

.imageContainer{ 
    position: relative; 
    width: 100%; 
} 

и сделать текст дочерним элементом этого контейнера (вместе с изображением). Затем, сделав ваш HTML текст шириной 100%, она должна масштабироваться в той же пропорции, что и изображения (и в своей очереди текст неподвижного изображения):

.imageContainer img{ 
    width: 100%; 
} 


.text{ 
    color: #fff; 
    display: block; 
    position: absolute; 
    bottom: 50%; 
    padding-right: 7vw; 
    right: 0; 
    text-align: right; 
    width: 100%; 
}