正確定位響應圖像標題？

Question

我希望有人能幫我解決我的定位問題。

我想編碼圖像標題。通常情況下，我不會對此產生任何問題......但是，我正試圖在圖片的右下方放置一個標題。

我已經實現了它here（有點大聲笑）。但是，我正在使用大量媒體查詢來停止在右側切斷字幕。

我不禁想到必須有一個更乾淨，更高效的方式來做到這一點...任何人都可以幫助我嗎？ :-)

Answer 1

如果您具有圖像父元素的相對位置，則可以絕對定位標題，並使用底部百分比正確定位。

.img-wrap { 
    position:relative; 
} 

.caption { 
    position:absolute; 
    bottom:15%; 
    right:0; 
    padding:0.5em; 
} 

JSFiddle

Demo