具有CSS背景图片的宽高比div

Question

I have images of equal aspect ratios (300px x 255px) in divs taking up ~31% of the width to make 3 columns on desktop/tablet, then full width on mobile. The images scale to 100% within the div, with the height set as auto. I need to change them from img tags to background images

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

Is there a way to make these images background images, and still have the aspect ratio dictate the height of the div--allowing the same responsive scaling? I'm hoping there's a way to do this without using .js, if possible. Can it be done with just CSS? Thanks!

Answer 1

You could use % to set a padding taking width for reference to keep ratio. example : http://codepen.io/anon/pen/vNXgJp or http://codepen.io/anon/pen/VvKPMM (demos below)

 .hotels { display: inline-block; width: 31.8%; vertical-align: top; margin-bottom: 22px; background: url(http://www.telodesign.com/test/cavallo-300.jpg) no-repeat red; background-size: 100% auto; } .hotels:before { content: ''; padding-top: 85%; float: left; } 

 <div class="hotels"> Here's a title</div> <div class="hotels"> Here's a title</div> <div class="hotels"> Here's a title</div> 

or

 .hotels { display: inline-block; width: 31.8%; vertical-align: top; margin-bottom: 22px; background: url(http://www.telodesign.com/test/cavallo-300.jpg) no-repeat red; background-size: 100% auto; } .hotels:before { content: ''; padding-top: 85%; display: inline-block; vertical-align: bottom; margin-left: -0.25em; } p { display: inline-block; width: 100%; text-align: center; background: rgba(0, 0, 0, 0.5); margin: 0; padding: 1em; box-sizing: border-box; } 

 <div class="hotels"> <p>Here's a title</p> </div> <div class="hotels"> Here's a title</div> <div class="hotels"> Here's a title</div> 

Answer 2

You could try using view widths to keep the proportions on resize:

HTML
<div class="hotels">
Here's a title</div>

<div class="hotels">
Here's a title</div>

<div class="hotels">
Here's a title</div>

CSS

.hotels {
  display: inline-block;
  width: 31.8vw;
  height: 26.3vw;
  vertical-align: top;
    margin-bottom: 22px;
  background-image:url(http://www.telodesign.com/test/cavallo-300.jpg);
   background-size: cover;
}