将 text-div 对齐到图像顶部的右下角

Question

我有一个 'text-box' 可以根据从数据库中获取的句子（字符串）的长度来改变大小。

我希望此文本显示在实际图像的右下角，但不知何故 div 比实际图像大。

如何判断图片的底部？

#header-img {
    position : absolute;
    top : 0px;
    left : 0px;
    min-width : 100%;
    min-height : 50%;
    display : inline-block;
}

#topimg {
    position : absolute;
    width : 100%;
    top : 0px;
    z-index : -1;
}

#textblock{
    text-align : center;  
    width : 46%;
    max-height : 20%;
    position : absolute;
    bottom : 0;
    right : 0;
}

<div id="header-img" class="container-fluid span12">
    <img id="topimg" src="./img/top_image.jpg" class="center-block img-responsive">
    <div id="textblock">
        <span id="rotate">Random Sentences!</span>
    </div>
</div>

Answer 1

也许将图像和文本包装在一起？

figure {
  display: inline-block;
  position: relative;
  overflow: hidden;
}

img {
  display: block;
  /* or vertical-align:top; */
}

figcaption {
  position: absolute;
  background: red;
  color: yellow;
  font-weight: bold;
  text-align:center;
  padding: 0.25em 2.5em;
  bottom: 0;
  max-width: (100% + 2em);
  right: -1em;
  transform: rotate(-25deg);
  transform-origin: 4.5em -2.5em;
  box-shadow: 0 0 5px black;
}

<figure>
  <img src="http://lorempixel.com/300/180/" />
  <figcaption>
    rotate me ?
  </figcaption>
</figure>
<figure>
  <img src="http://lorempixel.com/300/180/" />
  <figcaption>
    or rotate me not ?
  </figcaption>
</figure>
<figure>
  <img src="http://lorempixel.com/300/180/" />
  <figcaption>
    longer text ?
    or rotate me not ?
  </figcaption>
</figure>

Answer 2

使图像与包装纸的宽度相同，在您的示例中 #header-img，然后使用包装纸定位文本。

#header-img {
    position : relative;
    min-width : 100%;
    min-height : 50%;
}

#topimg {
    display: block;
    width : 100%;
}

#textblock{
    text-align : center;  
    width : 46%;
    position : absolute;
    bottom : 0;
    right : 0;
    color: #FFF;
    background-color: rgba(0, 0, 0, 0.6);
}

<div id="header-img" class="container-fluid span12">
    <img id="topimg" src="http://lorempixel.com/400/400" class="center-block img-responsive">
    <div id="textblock">
        <span id="rotate">Random Sentences!</span>
    </div>
</div>

将 text-div 对齐到图像顶部的右下角

Have text-div aligned right bottom on top of image

html

css

css-position