css - 正确定位响应图像标题？

Question

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

我正在尝试编写图片说明。通常情况下，我对此没有任何问题...但是，我试图将标题放在右侧，图像的中间位置。

我已经实现了here (有点哈哈)。但是，我正在使用大量媒体查询来阻止标题在右侧被截断。

我忍不住认为必须有一种更清洁、更有效的方法来做到这一点……有人能帮帮我吗？ :-)

Answer 1

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

.img-wrap {
  position:relative;
}

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

JSFiddle

Demo