如何垂直对齐旋转的图像标题？

Question

我正在尝试对齐图像容器左下角的图像标题。

这是期望结果的图片。

这是我正在使用的HTML/CSS：

.elementor-image figure {
    position: relative;
}

.elementor-image figure figcaption {
    position: absolute;
    bottom: 0;
    left: -40px;
    transform: rotate(-90deg);
}

<div class="elementor-image">
<figure class="wp-caption">
<img src="https://picsum.photos/200/300">                                           
<figcaption class="widget-image-caption wp-caption-text">The Lorem <span></span></figcaption>
</figure>
</div>

我的代码有两个问题：

旋转的文本不是从底部 left-hand 角开始的。
向左应用：-40px 并不总是将文本与图像对齐（有时它会重叠在图像的顶部）。

这是说明问题的另一个屏幕截图。

我希望我自己的解释是正确的，我一直在努力解决这个问题，所以非常感谢您的意见和想法。谢谢！

Answer 1

简单考虑transform-origin:bottom left;

.elementor-image figure {
  position: relative;
}

.elementor-image figure figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: rotate(-90deg);
  transform-origin:bottom left;
}

img {
 display:block; /* to avoid white space and have a perfect alignment */
}

<div class="elementor-image">
  <figure class="wp-caption">
    <img src="https://picsum.photos/200/300">
    <figcaption class="widget-image-caption wp-caption-text">The Lorem <span></span></figcaption>
  </figure>
</div>

如何垂直对齐旋转的图像标题？

How to vertically align a rotated image caption?

html

css

caption