正确定位响应图像标题？

Question

我希望有人能帮我解决我的定位问题。

我想编码图像标题。通常情况下，我不会对此产生任何问题......但是，我正试图在图片的右下方放置一个标题。

我已经实现了它here（有点大声笑）。但是，我正在使用大量媒体查询来停止在右侧切断字幕。

我不禁想到必须有一个更干净，更高效的方式来做到这一点...任何人都可以帮助我吗？ :-)

Answer 1

如果您具有图像父元素的相对位置，则可以绝对定位标题，并使用底部百分比正确定位。

.img-wrap { 
    position:relative; 
} 

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

JSFiddle

Demo