Question

我正在使用本教程在我的图片上创建带文字的叠加层：

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

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

有没有人有任何想法？提前谢谢！

Answer 1

尝试尝试min-width和min-height。

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

Answer 2

在实际项目中，我们通常使用任何响应式框架。像bootstrap或基础。所以我认为你可以忽略，因为框架将正确处理这个问题。无需使用任何％来使其响应。对于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 -->

Answer 3

我认为.box的维度百分比将基于父级的高度。由于在身体上没有指定高度，因此它没有参考框架。尝试添加以下内容以使百分比在.box上工作。

html, body {
    height:100%;
}

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

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

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

3 个答案: