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

Question

我在div中有相等长宽比（300px x 255px）的图像，占据了大约31％的宽度，以便在台式机/平板电脑上打印3列，然后在移动设备上显示全宽。 图像在div内缩放为100％，高度设置为自动。 我需要将其从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;
}

有没有办法使这些图像成为背景图像，并且纵横比仍然决定div的高度-允许相同的响应缩放？ 我希望有一种方法，如果可能的话，不使用.js。 可以仅使用CSS完成吗？ 谢谢！

Answer 1

您可以使用％来设置填充宽度，以作为保持比例的参考。 例如： http : //codepen.io/anon/pen/vNXgJp或http://codepen.io/anon/pen/VvKPMM （下面的演示）

 .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> 

要么

 .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

您可以尝试使用视图宽度来保持比例调整大小：

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