html - 创建一个响应式<figcaption>

我有一个网站，当用户悬停在一张图片上时，figcaption会向上滑动。
我的屏幕分辨率是1024x 768，图像分辨率是300x 400像素。它非常适合我的屏幕分辨率。最近我意识到一个响应性网站是多么重要，所以我试图把我的整个网站变成一个响应性网站。不过，我的指纹识别能力不可能达到1366 x 768这样的分辨率。下面是我使用的代码和试图解释我遇到的问题的图片。
我使用的每个数字是300x400。我在“你好”图中使用了宽度：30%，因为有3张图片，所以我给它们每个图片的宽度：30%。
image.php中的代码：

<div id="hello">
   <figure>
      <img src="hello.png" alt="hello"/>
           <figcaption>
              <p>Hello </p>
              <br/>
              <p>Hello everyone!</p>
           </figcaption>
    </figure>
</div>

我的css：

#hello{
   width:100%;
}

#hello figure{

    width: 30%;
    height: 400px;
    overflow:hidden;
    float:left;
    text-align: center;
    font-size: 15px;
    font-family: 'Fredericka the Great', cursive;
    font-weight: bold;
    display: block;
    padding:0;
    margin: 15px;
}

#hello figcaption{
    position: relative;
    top: -105px;
    background: rgba(239, 239, 239, 0.6);
    -webkit-transition: top 1s ease;
    -ms-transition: top 1s ease;
    -moz-transition: top 1s ease;
    -o-transition: top 1s ease;
}

#hello figure:hover figcaption{
        top:-210px;
    }

当分辨率为1024x 768时，没有问题：
（尚未以1024x 768分辨率悬停）
以1024x 768分辨率悬停
当它在1366x 768分辨率时，会出现figcaption溢出的问题。
请与我分享你宝贵的知识和建议。非常感谢。
编辑：如果我将figcaption width设置为300px（将线宽300px添加到hello figcaption），它将如下所示：

最佳答案

您可以将width设置为figcaption或figure它可以工作：

img {
  width:300px;
}
figure {
  outline:solid;
    width:300px;

}
figcaption {
  outline:solid;

}

演示：http://jsbin.com/ogoxop/1/edit
对于真正的响应式布局，您可能还希望使用媒体查询，以根据设备调整宽度。

关于html - 创建一个响应式<figcaption>，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17634569/