正确定位响应图像标题？

Question

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

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

我已经实现了它 here（笑）。但是，我正在使用大量媒体查询来阻止标题在右侧被截断。

我不禁认为必须有一种更清洁、更有效的方法来做到这一点...有人可以帮助我吗？ :-)

Answer 1

如果您对图像的 parent 元素进行了相对定位，则可以对标题进行绝对定位，并使用底部百分比进行正确定位。

.img-wrap {
  position:relative;
}

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

JSFiddle

Demo