Ich habe Bilder mit gleichem Seitenverhältnis (300 x 255 Pixel) in Divs, die ~ 31% der Breite einnehmen, um 3 Spalten auf dem Desktop / Tablet und dann auf dem Handy in voller Breite zu erstellen. Die Bilder werden innerhalb des Bereichs auf 100% skaliert, wobei die Höhe als automatisch festgelegt wird. Ich muss sie von IMG-Tags in Hintergrundbilder ändern.

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

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

Ist es eine Möglichkeit, diese Bilder als Hintergrundbilder zu verwenden, und das Seitenverhältnis bestimmt trotzdem die Höhe des Divs - so dass dieselbe ansprechende Skalierung möglich ist? Ich hoffe, dass es einen Weg gibt, dies zu tun, wenn möglich ohne .js. Kann man das nur mit CSS machen? Vielen Dank