Html 具有CSS背景图像的纵横比div

我在桌面/平板电脑上有三列等宽比（300px x 255px）的div图像，占据了约31%的宽度，然后在手机上是全宽。图像在div内缩放到100%，高度设置为auto。我需要将它们从img标签更改为背景图像

**HTML：**


这是一个标题


这是一个标题


这是一个标题
**CSS:**
.酒店{
显示：内联块；
宽度：31.8%；
垂直对齐：顶部；
边缘底部：22px；
}
*强调文本*。酒店img{
宽度：100%；
高度：自动；
}

---

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

您可以使用%设置填充宽度作为参考，以保持比率。 例子： 或（下面的演示）

。酒店{
显示：内联块；
宽度：31.8%；
垂直对齐：顶部；
边缘底部：22px；
背景：url(http://www.telodesign.com/test/cavallo-300.jpg)没有重复的红色；
背景尺寸：100%自动；
}
.酒店：以前{
内容：''；
垫面：85%；
浮动：左；
}

这是一个标题
这是一个标题
这里有一个标题

，您可以使用%设置一个以宽度作为参考的填充，以保持比率。 例子： 或（下面的演示）

。酒店{
显示：内联块；
宽度：31.8%；
垂直对齐：顶部；
边缘底部：22px；
背景：url(http://www.telodesign.com/test/cavallo-300.jpg)没有重复的红色；
背景尺寸：100%自动；
}
.酒店：以前{
内容：''；
垫面：85%；
浮动：左；
}

这是一个标题
这是一个标题
这里有一个标题

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

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

HTML
这是一个标题
这是一个标题
这是一个标题
CSS
.酒店{
显示：内联块；
宽度：31.8vw；
高度：26.3vw；
垂直对齐：顶部；
边缘底部：22px；
背景图片：url(http://www.telodesign.com/test/cavallo-300.jpg);
背景尺寸：封面；
}

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

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

HTML
这是一个标题
这是一个标题
这是一个标题
CSS
.酒店{
显示：内联块；
宽度：31.8vw；
高度：26.3vw；
垂直对齐：顶部；
边缘底部：22px；
背景图片：url(http://www.telodesign.com/test/cavallo-300.jpg);
背景尺寸：封面；
}

谢谢，阿什——这有什么不好的地方吗？比如浏览器支持。？我以前从未听说过视图宽度。如果您想支持较旧的浏览器，可以使用%来代替。Hanks，Ash--这有什么缺点吗--比如浏览器支持。？我以前从来没有听说过视图宽度。如果你想支持更老的浏览器，可以使用%来代替，GCyrillus。我对这里到底发生了什么有点困惑——即使在玩了代码笔之后。。。但它确实有效！那么，顶部填充物是否会影响div的高度呢？剩下的-.25 em边距的用途是什么？无论如何，感谢您为一个令人沮丧的问题提供了一个很好的解决方案@hudsonian看一看（看看什么百分比值实际上与保证金相同）。“伪lément”在这里可以拉伸你的盒子（它实际上是一个最小高度，因为它仍然可以长得更高/扩展得更高），非常感谢，GCyrillus。我对这里到底发生了什么有点困惑——即使在玩了代码笔之后。。。但它确实有效！那么，顶部填充物是否会影响div的高度呢？剩下的-.25 em边距的用途是什么？无论如何，感谢您为一个令人沮丧的问题提供了一个很好的解决方案@hudsonian看一看（看看什么百分比值实际上与保证金相同）。这个伪元素是用来拉伸你的盒子的（它实际上是一个最小高度，因为它仍然可以长得更高）