html - 定位一个 figcaption 以固定在图像的右下角

Question

我想在图像顶部创建一个 figcaption，默认位于图像右下角，大约是图像宽度的 40%。 这是我的意思的图像:http://imgur.com/a/U9ETh

这是我到目前为止的代码，但似乎无法在不溢出的情况下默认向右:

figure {
    margin: 0;
    line-height: 0;
    position: relative;
}

figcaption {
    font-size: .9em;
    line-height: 1.5;
    color: #fff;
    padding: 1em;
    background: rgba(19, 43, 102, .85);
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40%;
}

 <figure>
    <img src="img/anImage.png">
    <figcaption>
        <h4>Blog Post</h4>
    </figcaption>
</figure>

Answer 1

<figure>将是容器的整个宽度，而图像将是其自然大小。

你有两个选择。

1. 使图像全宽(当然取决于样式)
2. 限制图形元素的宽度

选项 1:

figure img {
    height: auto;
    max-width: none;
    width: 100%;
}

我假设您已经为图像设置了最大宽度并将其删除。

选项 2:

figure { 
    display: table;
    margin: 0 auto;
    position: relative;
}

如果您还没有这样做，您可能还想将图像设置为 display: block;和 vertical-align: top;消除任何微小的偏差。