在響應式佈局中將文本與圖像上的另一個文本即右對齊

Question

我有一個頁面，其中包含文本image。圖像外部的文字需要與圖像中的文字正確對齊。我試着用一些適用於某些尺寸的百分比來處理這個問題，但並非如此。

試圖找出是否有一個簡單的方法來做到這一點，適用於所有人和響應式佈局。

例子：

Answer 1

這個怎麼樣的嗎？ https://jsfiddle.net/n451c4ym/2/需要調整「底部」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%; 
}