将文本与自动宽度容器中的图像对齐，该容器延伸到图像宽度

Question

这是小提琴https://jsfiddle.net/qyLjxwrv/1/。

正如您所见，左右标题与屏幕边角对齐，而我想将它们与图像角对齐。尝试2小时没有成功...

.wrapper {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    background-color: rgba(213,213,213,.5);
    text-align: center;
}
.info {
    text-align: left;
}
.right-title {
    float: right;   
}

<div class="wrapper">
  <div class="inner">
      <div class="info">
          <span class="left-title">Left</span>
          <span class="right-title">Right</span>
      </div>
      <img src="http://i.imgur.com/CRcoPPS.jpg" />
  </div>
</div>

请注意，我不希望标题出现在图像内部，而是出现在图像上方并与图像的左右角对齐。

Answer 1

看起来你可以这么简单地做到这一点，看看内联的评论。

<强> Updated Demo

＆＃13;

＆＃13;

.wrapper {
    display: table; /*shrink-to-fit*/
    margin: 0 auto; /*center*/
}
.wrapper img {
    max-width: 100%; /*responsive*/
}
.left-title {
    float: left; /*left*/
}
.right-title {
    float: right; /*right*/
}

＆＃13;

<div class="wrapper">
  <div class="inner">
      <div class="info">
          <span class="left-title">Left</span>
          <span class="right-title">Right</span>
      </div>
      <img src="http://i.imgur.com/CRcoPPS.jpg" />
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

修改：使用灰色背景颜色 partly 和 full page 进行演示。