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