Наложение текста на изображение Hover - Отзывчивый

Question

Я использую этот учебник, чтобы создать наложение на моих изображений с текстом:

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

Он прекрасно работает, однако у меня есть отзывчивый сайт, и если я пытаюсь войти a%, как ширина/высота «.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 мы используем

<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