垂直文本始终保持与图像侧面相同的距离。

Question

我有一张图片，上面有一些垂直的文字，上面写着这张照片。

我希望确保文本在图像响应时始终保持在图像之外。

我试着把文字放在图片的外面，在图片的右下角。

这是片段

​

section {
  max-width: 300px;
  margin: 0 auto;
}
img {
  width: 93%;
}
.vertical-text {
  transform: rotate(90deg);
  transform-origin: left top 0;
  -webkit-transform: rotate(90deg);
  -webkit-transform-origin: left top 0;
  -moz-transform: rotate(90deg);
  -moz-transform-origin: left top 0;
  float: right;
}

<div class="section">
  <div class="vertical-text">Photo Credit</div>
  <img src="http://www.wrestlingwithpopculture.com/wp-content/uploads/2013/03/BRET-HART-06b.jpg">
</div>

​

Answer 1

给你，我想这已经很近了。

注意图像宽度的计算。一般来说，文本将有一个线的高度(一旦旋转成为特宽)的1.2em...so，如果我们使图像100%的数量，应该总是有空间的文本块。

​

.section {
  max-width: 300px;
  margin: 0 auto;
  text-align: center;
  background: pink;
}

img {
  width: calc(100% - 1.2em);
  display: block;
}

.img-wrap {
  display: inline-block;
  position: relative;
}

.vertical-text {
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(100%, 50%) rotate(90deg);
  transform-origin: top left;


}

<div class="section">
  
  <div class="img-wrap">
<div class="vertical-text">Photo Credit</div>
    <img src="http://www.wrestlingwithpopculture.com/wp-content/uploads/2013/03/BRET-HART-06b.jpg">
  </div>
</div>

​

JSfiddle Demo

Answer 2

如果我明白的话。你想让文字在照片的右边

若要.vertical_text，请添加此width:0%;white-space:nowrap;

编辑：

在移动和媒体查询使img更小。85%而不是93%。这样就行了。你需要有足够的空间来适应文本。此外，如果您需要的话，可以使文本的字体大小变小。但是改变img的大小应该是不可能的。

要对齐底部的文本，这是有点棘手，因为旋转。使用这个

在.section添加position:relative

在.vertical_text添加position:absolute;bottom:68px;right:0

其中bottom:68px是文本的实际宽度。