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

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...因此，如果我们使图像 100%小于该高度，则应该始终留有空间文本 block 。

.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