html - 与图像外的左上角对齐的旋转文本？

Question

我想知道将旋转文本直接放置在图像左上角之外的最有效方法是什么？请记住，我希望文本框的高度与图像的高度对齐，并且图像比例会有所不同(高图像、矮图像、宽图像等)

这是我想要实现的视觉效果:

我该怎么做？提前致谢!

糟糕，忘记添加 jsfiddle。可以查看here!

.image.information {
  display:block;
  position:absolute;
  margin:0;
  top:45%;
  left:100%;
  height:100%;
  -webkit-transition:all 250ms linear;
  -o-transition:all 250ms linear;
  transition:all 250ms linear;
  transform:rotate(-90deg);
  -webkit-transform:rotate(-90deg);
  -moz-transform:rotate(-90deg);
  -ms-transform:rotate(-90deg);
  -o-transform:rotate(-90deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.image-wrap {
  height: 100%;
  width: 100%;
  display: block;
}
.image-inner img {
  width: 500px;
  height: auto;
  display: block;
}

<div class="image-wrap">
  <img class="image-inner" src="http://i.stack.imgur.com/YyMHW.jpg" alt="" />
  <div class="image information">
    information<br/>
    informa<br/>
    info
  </div>
</div>

Answer 1

这可以使用 CSS3 转换，但需要在您的 DOM 中添加一个额外的元素:

<div class="image-wrap">
    <img class="image-inner" src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2013/08/korea5b.jpg" alt="" />
    <div class="image information">
      <div class="info-inner">
        information
        <br/>informa
        <br/>info
      </div>
    </div>
</div>

现在有了一些绝对定位魔法:

.image.information {
    position:absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 75px;
    background: #ccc;
}
.info-inner {
    text-align: center;
    position: absolute;
    top: 50%; 
    left: 50%; 
    margin-top:-75px;
    margin-left: -75px;
    height:55px;
    width: 150px;
    vertical-align: bottom;
    transform: rotate(90deg);
}
.image-wrap {
    height: 100%;
    width: 100%;
    position: relative;
}
img.image-inner {
    width: 300px;
    margin-left: 75px;
}

请注意，如果不指定明确的文本高度，就没有简单的方法可以使文本垂直居中。在本例中，我选择了 55px。它会拉伸(stretch)以匹配您指定的任何图像的高度。

JSFiddle:http://jsfiddle.net/zephod/ckqcLsbv/2/