CSS 相对于图像定位文本

Question

我正在尝试将文本定位在将动态添加的图像右下角的范围内，因此图像可能会也可能不会占用其容器宽度的 100% 以保持其纵横比并保持在其容器的画布内。

代码笔

我的目标

这里的问题是文本相对于图像容器而不是图像本身的位置，并且图像并不总是占据 100% 的宽度。

我怎样才能将文本始终保持在图像的右下角 - 无论其尺寸如何 - 本身，而不是容器？

.HTML：

<div class="slider_wrapper">
<div class="report">
    <div class="image-container">
        <img src="https://i.gyazo.com/057739911161ece76a09b16617b92e72.jpg" alt="John Doe" class="report-image">
        <span class="name">John Doe</span>
    </div>
    <p class="report-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, id quisquam error, laborum officiis ea quod voluptates tempore, repellendus temporibus assumenda optio qui! Est distinctio numquam, quia quidem placeat repudiandae.</p>
</div>

.CSS：

.slider_wrapper {
    width: 400px;
    /*height: 300px;*/
    margin: 40px auto;
}
.image-container {
    position: relative;
    width: 100%;
}
.report-image {
    max-width: 100%;
    max-height: 350px;
    margin: 0 auto;
}
span.name {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.5);
}
.report-caption {
    margin-top: 30px;
    text-align: center;
    line-height: 1.35em;
}

Answer 1

如果希望蓝色边框跨越父项的整个宽度，请将父项添加到img和文本中，设置为"display: inline-block"，并将text-align: center从段落移动到环绕图像容器和段落的父项，以使新的inline-block图像容器和段落居中。

.slider_wrapper {
  width: 400px;
  /*height: 300px;*/
  margin: 40px auto;
  border: 1px solid black;
}
.image-container {
  border: 1px solid blue;
}
.report-image {
  max-width: 100%;
  max-height: 350px;
  display: block;
  margin: 0 auto;
}
span.name {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 5px;
  background-color: rgba(0, 0, 0, 0.5);
}
.report-caption {
  margin-top: 30px;
  line-height: 1.35em;
}
.report {
  text-align: center;
}
.image-holder {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

<div class="slider_wrapper">
    <div class="report">
        <div class="image-container">
          <div class="image-holder">
            <img src="https://i.gyazo.com/057739911161ece76a09b16617b92e72.jpg" alt="John Doe" class="report-image">
            <span class="name">John Doe</span>
          </div>
        </div>
        <p class="report-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, id quisquam error, laborum officiis ea quod voluptates tempore, repellendus temporibus assumenda optio qui! Est distinctio numquam, quia quidem placeat repudiandae.</p>
    </div>
</div>

如果边框不需要扩展父项的整个宽度，则只需将.image-container设置为inline-block，然后text-align: center移动到换行.image-container和段落以使它们居中。

.slider_wrapper {
  width: 400px;
  /*height: 300px;*/
  margin: 40px auto;
  border: 1px solid black;
}
.image-container {
  border: 1px solid blue;
  display: inline-block;
  position: relative;
}
.report-image {
  max-width: 100%;
  max-height: 350px;
  display: block;
  margin: 0 auto;
}
span.name {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 5px;
  background-color: rgba(0, 0, 0, 0.5);
}
.report-caption {
  margin-top: 30px;
  line-height: 1.35em;
}
.report {
  text-align: center;
}

<div class="slider_wrapper">
    <div class="report">
        <div class="image-container">
            <img src="https://i.gyazo.com/057739911161ece76a09b16617b92e72.jpg" alt="John Doe" class="report-image">
            <span class="name">John Doe</span>
        </div>
        <p class="report-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, id quisquam error, laborum officiis ea quod voluptates tempore, repellendus temporibus assumenda optio qui! Est distinctio numquam, quia quidem placeat repudiandae.</p>
    </div>
</div>

Answer 2

您可以向图像添加包装div：

<div class="image-container">
    <div class="image-wrapper">
     <img src="https://i.gyazo.com/057739911161ece76a09b16617b92e72.jpg" alt="John Doe" class="report-image">
    <span class="name">John Doe</span>
    </div>
</div>

然后是css：

.image-wrapper {
    position: relative;
    width: 50%;
    margin: 0 auto;
}