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

Question

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

http://codepen.io/pdelsignore/pen/uqenH

效果很好，但是我有一个响应式网站，如果我尝试输入 % 作为“.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%;