html - 如何创建具有固定纵横比和有限最大高度的响应式(关于父尺寸)DIV？

Question

保持 <div> 的纵横比或类似元素，同时响应父级的大小似乎是一个常见问题。在网上被广泛认为是最优雅的解决方案是这样的:

Maintain the aspect ratio of a div with CSS 使用包装器元素并通过 width 定义纵横比和 padding-bottom元素，两者都是相对于父元素的大小。

div.wrapper {
   width: 30%;
   padding-bottom: 30%;
}

现在，我当前的问题是，我需要介绍一个 max-height到这些包装元素，以确保至少有两行它们适合屏幕，与视口(viewport)大小无关。添加max-height对于上面的示例，限制了元素的高度，但保持宽度不变。

但是，即使通过 max-height 限制了高度，仍然需要保持 1:1 的纵横比。 .此外，我希望在视口(viewport)/父级的中心放置一组包装器元素(三列或四列，两行)。

有没有纯 html/css 的方法来实现这个(没有 javascript)？我不介意使用 <img>具有所需比例来源的元素，因为无论如何我都必须将(背景)图像应用于这些元素，但是对于上述问题的通用，优雅的解决方案将不胜感激。

Answer 1

你只需要使用下面的代码:

div.wrapper{
     height:auto;
     width:30%;
}

那么问题就解决了