Адаптивное фоновое изображение не отображается

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;
}

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