Question

我有一张带有一些垂直文字的图片，可以照相。

我希望确保文字在响应时始终在图片外。

我试图将文字放在图像的外面，并在图像的右下角。

这是片段

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

如果我理解正确的话。你希望文本在右边的照片之外

到.vertical_text添加此width:0%;white-space:nowrap;

编辑：

移动媒体查询

使img更小。 85％而不是93％。应该这样做。你需要有足够的空间让文本适应。你也可以根据需要使文字的字体大小。但是应该改变img大小。

要对齐底部的文字，由于旋转，它有点棘手。用这个
在.section添加position:relative
在.vertical_text添加position:absolute;bottom:68px;right:0
其中bottom:68px是文本的实际宽度

Answer 2

在这里，我认为这很接近。

注意图像宽度计算。一般来说，文本的行高（曾经旋转成宽度）为1.2em ...因此，如果我们使图像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

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

2 个答案: