响应 div 左边框上的旋转文本

Question

我在使用动态 content/images 围绕 div 的边界制作文本时遇到问题。这是 html 代码：

<div class="fp-wrapper">
  <a href="/url1">
    <img class="fp-image" src="image1.jpg">
  </a>
  <p class="fp-title1">Text on top border</p>
  <p class="fp-title2">Text on left border</p>
</div>

css:

.fp-wrapper {
    position: relative;
    display: inline-block;
    margin: auto;
}
.fp-image {
    width: 80%;
    float:left;
    padding: 10px;
    border: 1px solid #53565a;
    z-index: 1;
}
.fp-title1, .fp-title2{
    padding: 0 10px;
    background: #fff;
    position: absolute;
    top: 0;
    left: 30px;
    color: #53565a;
    text-transform: uppercase;
    font-weight: 500;
}
.fp-title2 {
    bottom: 50%;
    top: unset !important;
    transform: translate(-50%,-50%) rotate(-90deg);
}

Fiddle: https://jsfiddle.net/wutzbvef/

现在的问题是内容是动态的，所以 min-height/max-height 或负边距将不起作用（我认为是这样）。我还需要让它响应，覆盖边界。这种方法是正确的还是需要通过其他方法来实现。请帮忙。

编辑：我可能没有解释得更好，但我基本上想在 -90 度旋转段落的顶部垂直对齐，即 .fp-title2

Answer 1

先尝试旋转，然后重新居中 div。其他没关系。

    transform:  rotate(-90deg) translate(-50%, -50%);

您还可以为较小的图像使用可变字体大小。（顺便说一句，我也会使用 :after class），使用 a 标签，像这样：

.fp-wrapper {

}
.fp-wrapper a {
  width: 40%;
  display:inline-block;
  position: relative;
  z-index:1;
  float:left;
  padding: 10px;
  border: 1px solid #53565a;

}
.fp-image {
    width: 100%;
}

.fp-wrapper a:before{
    position: absolute;
    content:'text top';
    padding: 0 10px;
    background: #fff;
    display:inline-block;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    color: #53565a;
    text-transform: uppercase;
    font-weight: 500;
    z-index:20;
}
.fp-wrapper a:after {
  position:absolute;
  content:"left text";
  display:inline-block;
  text-transform: uppercase;
  font-weight: 500;
  padding: 0 10px;
  top:50%;  
  transform: translateX(-50%) rotate(-90deg);
  left:10px;
  z-index:10;
  background-color:#fff;
  
}

<div class="fp-wrapper">
        <a href="/url1">
            <img class="fp-image" src="https://i.ibb.co/y6XYb0z/image1.jpg">
        </a>
</div>

<div class="fp-wrapper">
        <a href="/url1" style="width:30%;">
            <img class="fp-image" src="https://i.ibb.co/y6XYb0z/image1.jpg">
        </a>
</div>

Answer 2

使用transform-origin

.fp-wrapper {
  position: relative;
  display: inline-block;
  margin-left: 50px;
}

.fp-image { 
  width: 100%;
  padding: 10px;
  border: 1px solid #53565a;
  z-index: 1;
}

.fp-title1,
.fp-title2 {
  padding: 0 10px;
  background: #fff;
  position: absolute;
  top: 0;
  left: 30px;
  color: #53565a;
  text-transform: uppercase;
  font-weight: 500;
}

.fp-title2 {
  transform: translate(-100%, 0%) rotate(-90deg);
  transform-origin: right center;
}

.w2 .fp-image {
  width: 80%;
}

.w3 .fp-image {
  width: 60%;
}

<div class="fp-wrapper">
  <a href="/url1">
    <img class="fp-image" src="https://i.ibb.co/y6XYb0z/image1.jpg">
  </a>
  <p class="fp-title1">Text on top border</p>
  <p class="fp-title2">Text on left border</p>
</div>

<div class="fp-wrapper w2">
  <a href="/url1">
    <img class="fp-image" src="https://i.ibb.co/y6XYb0z/image1.jpg">
  </a>
  <p class="fp-title1">Text on top border</p>
  <p class="fp-title2">Text on left border</p>
</div>


<div class="fp-wrapper w3">
  <a href="/url1">
    <img class="fp-image" src="https://i.ibb.co/y6XYb0z/image1.jpg">
  </a>
  <p class="fp-title1">Text on top border</p>
  <p class="fp-title2">Text on left border</p>
</div>

响应 div 左边框上的旋转文本

Rotated text on left border of responsive div

html

css

css-transforms