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

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

按属性

将<img>设置为height:auto

<img src...height='auto'>

或通过CSS样式表或<style>阻止

img {height:auto...}

<强>段

＆＃13;

html,
body {
  font: 100 62.5%/1 Verdana;
}
figure {
  margin: 0 auto;
  display: table;
  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%;
}

＆＃13;

<figure>
  <img src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" width='200' height='auto'>
  <figcaption>
    <h4>Blog Post</h4>
  </figcaption>
</figure>

＆＃13;

Answer 2

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

您有两种选择。

使图像全宽（当然取决于造型）
限制图元素的宽度

选项1：

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

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

选项2：

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

如果你还没有这样做，你可能还想将图像设置为display: block;和vertical-align: top;，以消除任何轻微的错位。

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

2 个答案: