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

问题描述

如何在文本右下角旁边的图像旁边垂直放置文本？图像始终居中，但尺寸并不总是相同，可以具有不同的宽度和高度。 我正在尝试完成的示例

这里是Codepen

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

解决方法

将display: inline-block应用于图像，并在包含文本的旋转元素上使用transform-origin: bottom right。您可以使用bottom中的.author参数来微调文本的文本垂直位置。

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