图像悬停上的文本叠加 - 响应式答案

【问题标题】：Text Overlay on Image Hover - Responsive图像悬停上的文本叠加 - 响应式
【发布时间】：2015-06-25 14:36:38
【问题描述】：

我正在使用本教程在我的图像上创建一个带有文本的叠加层：

效果很好，但是我有一个响应式网站，如果我尝试输入 % 作为“.box”的宽度/高度，图像就会消失。看来它只能是固定的（即px），显然不能缩放。

.box {  
cursor: pointer;  
height: 250px;   
position: relative;  
overflow: hidden;  
width: 400px;
font-family: 'Open Sans', sans-serif;
}

有人有什么想法吗？提前致谢！

【问题讨论】：

标签： javascript jquery html css responsive-design

【解决方案1】：

试试min-width 和min-height。

min-width: 100%;
min-height: 100%;

【讨论】：

@jkofron.e 建议的方法似乎可以解决问题codepen.io/anon/pen/dPREBE

【解决方案2】：

在实时项目中，我们通常使用任何响应式框架。就像引导程序或基础一样。所以我认为你可以忽略，因为框架会正确处理这个问题。无需使用任何 % 来使其响应。对于 Bootstrap，我们使用

 <div class="row">
    <div class="col-md-4">
        <div class="box">  
            <img src="http://files.room1design.com/oldcity.jpg"/>  
            <div class="overbox">
                <div class="title overtext">
                    Walk This Way
                </div>
                <div class="tagline overtext">
                    Follow the path of stone, a road towards an ancient past
                </div>
            </div>
        </div>  <!-- End box -->
    </div>  <!-- End Col-4 -->
 </div>  <!-- End row -->

【讨论】：

【解决方案3】：

我相信 .box 的尺寸百分比将基于父级的高度。因为没有在身体上指定高度，所以它没有参考框架。尝试添加以下内容以获得在 .box 上工作的百分比。

html, body {
    height:100%;
}

这是一个更新的代码笔，其中包含一些其他更改，以说明在给出您的身体尺寸后百分比的使用。

http://codepen.io/anon/pen/dPREBE

【讨论】：