Question

我有一个网站，当用户将鼠标悬停在图像上时，figcaption将向上滑动。

我的屏幕分辨率为1024 x 768，图像分辨率为300 x 400像素。它适用于我的屏幕分辨率。最近我意识到响应式网站的重要性，所以我试图将整个网站转变为响应式网站。但是我的figcaption将不适用于像1366 x 768这样的分辨率。下面是我使用的代码和试图解释我遇到的问题的图像。

我使用的每个数字是300x400。我在#hello图中使用了宽度：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;
    }

当它的分辨率为1024 x 768时，它没有问题：

（尚未悬停在1024 x 768分辨率下）

enter image description here

以1024 x 768分辨率悬停

enter image description here

当它处于1366 x 768分辨率时，它有问题溢出的问题。

enter image description here

请与我分享您宝贵的知识和建议。非常感谢你。

编辑：如果我将figcaption宽度设置为300px（将线宽：300px添加到#hello figcaption），它将如下所示：

enter image description here

Answer 1

您可以将宽度设置为figcaption或figure它的工作原理：

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

}
figcaption {
  outline:solid;

}

演示：http://jsbin.com/ogoxop/1/edit

对于真实的响应式布局，您可能还希望使用媒体查询，根据设备调整宽度。

Answer 2

我想也许你想要这样的东西：http://jsfiddle.net/weCLp/

您将包装器设置为position: relative;，将标题设置为position: absolute; bottom: 0; width:100%以使其保持在底部，并装入容器

#hello{ 
   width:100%;
}

#hello figure{
    width: 25%;
    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;
    position: relative;
}

#hello figcaption{
    position: absolute;
    bottom: 0;
    height: 3em;
    width: 100%;
    background: rgba(239, 239, 239, 0.6);
    -webkit-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
}

#hello figure:hover figcaption{
        height: 6em;
    }

img { 
     width: 100%; 
}

（编辑：错过了您希望整个图像始终可见）

创建响应式<figcaption> </figcaption>

2 个答案: