Отзывчивое фоновое изображение не отображается

Question

Я пытаюсь сделать некоторые ссылки в 3 столбцах с изображениями, и я не знаю, почему эти изображения не отображаются. Я искал много информации об этих вещах, но никто мне не помог. Кто-нибудь может помочь мне с этим? :)

HTML

<div id="place"> 
    <div class="place_button"> 

      <div id="choose"> 
       <a href=""> 
        <div class="button image1"></div> 
       </a> 
      </div> 

      <div id="choose"> 
       <a href=""> 
        <div class="button image2"></div> 
       </a> 
      </div> 

      <div id="choose"> 
       <a href=""> 
        <div class="button image3"></div> 
       </a> 
      </div> 

    </div> 
</div> 

CSS

#place .place_button{ 
    display:table; 
    margin: 0 auto 20px auto; 
} 

#place #choose{ 
    float: left; 
    margin: 1%; 
} 

#place .button{ 
    display: table-cell; 
    background-size: cover; 
    background-position:center; 
    width: 31%; 
    height:auto; 
    -webkit-transition:1s;-moz-transition:1s;-o-transition:1s; 
} 
/* There is different images! */ 
#place .image1{background-image: url('http://swayevents.com/sites/default/files/05_0.jpg');} 
#place .image1:hover{background-image:url('https://f4.bcbits.com/img/a0401558592_16.jpg');} 

#place .image2{background-image:url('http://swayevents.com/sites/default/files/05_0.jpg');} 
#place .image2:hover{background-image:url('https://f4.bcbits.com/img/a0401558592_16.jpg');} 

#place .image3{background-image:url('http://swayevents.com/sites/default/files/05_0.jpg');} 
#place .image3:hover{background-image:url('https://f4.bcbits.com/img/a0401558592_16.jpg');} 

Существует моя установка JSFiddle

Answer 1

в изображение в background-image не дает высоты и ширины. поэтому следует нужно добавить не-процентное значение высоты и ширины в к div, где объявлен фоновое изображение ..

Пример:

#place .button{ 
    width: 300px; 
    height:200px; 
} 

РЕДАКТИРОВАТЬ

Чтобы сделать его отзывчивым, вы должны изменить структуру столбцов. Попробуй это.

HTML

<div id="place"> 
    <div class="place_button"> 
    <a href="" id="choose" > 
     <div class="button image1"></div> 
    </a> 
    <a href="" id="choose" > 
     <div class="button image2"></div> 
    </a> 
    <a href="" id="choose" > 
     <div class="button image3"></div> 
    </a> 
    </div> 
</div> 

CSS

#place .place_button{ 
    display:table; 
    margin: 0 auto 20px auto; 
} 

#place #choose{ 
    display:block; 
    float: left; 
    margin: 1%; 
} 

#place .button{ 
    background-size: cover; 
    background-position:center; 
    width: 300px; 
    height:200px; 
-webkit-transition:1s;-moz-transition:1s;-o-transition:1s; 
} 

Answer 2

я нашел информацию о Vh единиц, и я стараюсь их использовать, и это помогает мне! Теперь мой код выглядит следующим образом ....

HTML без изменений

CSS

#place .place_button{ 
    display:table; 
    margin: 0 auto 20px auto; 
} 

#place #choose{ 
    float: left; 
    width:31%; 
    margin: 1%; 
} 

#place .button{ 
    display: table-cell; 
    background-size: cover; 
    background-position:center; 
    height: 40vh; 
    width: 40vh; 
    -webkit-transition:1s;-moz-transition:1s;-o-transition:1s; 
} 

Спасибо за помощь! :)