旋转后不适合div后的Bootstrap <h>行

Question

我正在开发一个基于bootstrap网格的项目。主页面（项目库）基于带有题字和线条的图片缩略图：之后或：之前。其中一个字幕被倒置了-90度。不幸的是，<h>的反转并不构成一条线：在保留其长度并用完<div>区域后，与另一个缩略图重叠。

效果

所以我想出了另一种方式。在服务器上，我将图像旋转了90度，使其垂直。现在它正在使用线路的经度并坚持到底。不幸的是，旋转后，图像不会在<div>中缩放。

效果

其中一个根本不起作用。我关心的是如何解决它，它必须看起来像这样，并在bootstrap中响应。

应

Answer 1

如果有人会有这样的问题，这就是解决方案（不是我的，朋友，但是工作:)）：

h2 {
  font-size: 1.5rem;
  font-weight: 700;
  position: relative;
  overflow: hidden;
  margin: 0;
}

h2 {
  display: flex;
  text-align: left;
  width: 100%;
}

h2.left:before {
  content: '';
  flex: 1;
  margin: auto 0em;
  height: 0;
  margin-right: .3em;
  border-top: solid black 3px;
}

h2.right:after {
  content: '';
  flex: 1;
  margin: auto 0em;
  height: 0;
  margin-left: .3em;
  border-top: solid black 3px;
}

.edgetop {
  margin-bottom: -.3rem;
}

.edgetopmore {
  margin-bottom: -.3rem;
  z-index: 2;
}

.edgebottom {
  margin-top: -.3rem;
}

.rotation-link {
  display: flex;
  align-items: flex-end;
}

.text-wrap {
  width: 1.4rem;
  align-self: stretch;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.text-wrap h2 {
  position: absolute;
  top: 100%;
  left: 0;
  transform: rotate(-90deg);
  transform-origin: 0 0;
  width: auto;
  height: auto;
  margin-bottom: 0;
}

.text-wrap h2::after {
  width: 9999px;
}

.img-wrap {
  flex-grow: 1;
  flex-shrink: 1;
}

.img-wrap img {
  display: block;
}

<div>
<a href="index.html" class="rotation-link">
 <div class="text-wrap">
   <h2 class="right edgetop zodiac">header</h2>
 </div>
<div class="img-wrap">
  <img src="https://sl.d.umn.edu/och/PhotoGallery/no-image-available.jpg" alt="Image" />
</div>
</a>
</div>