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图像容器和段落居中。

＆＃13;

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

＆＃13;

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

＆＃13;

如果边框不需要展开父级的全宽，则可以将.image-container设置为inline-block并将text-align: center移动到包裹.image-container的父级1}}和段落将它们都集中在一起。

＆＃13;

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

＆＃13;

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

＆＃13;

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;
}

CSS位置文本相对于图像

2 个答案: