У меня есть изображения с одинаковыми пропорциями (300px x 255px) в делениях, занимающие ~ 31% ширины, чтобы создать 3 столбца на рабочем столе / планшете, а затем на всю ширину на мобильном телефоне. Изображения масштабируются до 100% в пределах div, с высотой, установленной как auto. Мне нужно изменить их с тегов img на фоновые изображения

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

**HTML:**
<div class="hotels">
    <img src="http://www.telodesign.com/test/cavallo-300.jpg" alt=""><br>
Here's a title
</div>

<div class="hotels">
    <img src="http://www.telodesign.com/test/cavallo-300.jpg" alt=""><br>
Here's a title
</div>

<div class="hotels">
    <img src="http://www.telodesign.com/test/cavallo-300.jpg" alt=""><br>
Here's a title
</div>

**CSS:**
.hotels {
    display: inline-block;
    width: 31.8%;
    vertical-align: top;
    margin-bottom: 22px;

}

*emphasized text*.hotels img {
    width: 100%;
    height: auto;
}

Есть ли способ сделать эти изображения фоновыми изображениями, и при этом соотношение сторон определяет высоту деления - позволяя такое же гибкое масштабирование? Я надеюсь, что есть способ сделать это без использования .js, если это возможно. Это можно сделать только с помощью CSS? Спасибо!