如何根据图像大小将文本垂直放置在图像旁边？

Question

如何将文本垂直放置在图像的右下角旁边？图像总是居中，但它的大小并不总是相同，它可以有不同的宽度和高度。我试图完成的示例

.featuredimg {
  position: relative;
  text-align: center;
  margin-bottom: 20px; 
}

.author {
    position: absolute;
    right: 0;
    bottom: 0;
    transform: rotate(90deg) translate(-50%,-100%);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="featuredimg">
  <img src="https://via.placeholder.com/550">
  <div class="author">Author: Asadfasdfasdf</div>
</div>

<div class="featuredimg">
  <img src="https://via.placeholder.com/850">
  <div class="author">Author: Asadfasdfasdf</div>
</div>

<div class="featuredimg">
  <img src="https://via.placeholder.com/1250">
  <div class="author">Author: Asadfasdfasdf</div>
</div>

Answer 1

将 display: inline-block 应用于 image/s 并在包含文本的旋转元素上使用 transform-origin: bottom right。您可以使用 .author 中的 bottom 参数来 fine-tune 文本的 exaxt 垂直位置。

.featuredimg {
  position: relative;
  text-align: center;
  margin-bottom: 20px; 
  display: inline-block;
  vertical-align: bottom;
}

.author {
    position: absolute;
    right: 0;
    bottom: 4px;
    transform: rotate(90deg);
    transform-origin: bottom right;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="featuredimg">
  <img src="https://via.placeholder.com/550">
  <div class="author">Author: Asadfasdfasdf</div>
</div>

<div class="featuredimg">
  <img src="https://via.placeholder.com/850">
  <div class="author">Author: Asadfasdfasdf</div>
</div>

<div class="featuredimg">
  <img src="https://via.placeholder.com/1250">
  <div class="author">Author: Asadfasdfasdf</div>
</div>

如何根据图像大小将文本垂直放置在图像旁边？

How to position text vertically beside image depending on image size?

html

css

css-transforms