如何创建具有固定纵横比和有限最大高度的响应式（关于父级大小）DIV？

Question

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

Maintain the aspect ratio of a div with CSS 使用包装器元素并通过width 和padding-bottom 元素定义纵横比，这两个元素都与父尺寸相关。

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

现在，我当前的问题是，我需要引入 max-height 来向这些包装器元素引入一个max-height，以确保它们中的至少两行适合屏幕，与视口大小无关。在上面的示例中添加max-height 会限制元素的高度，但保持宽度不变。

但是，即使通过max-height 限制高度，仍然需要保持 1:1 的纵横比。另外，我希望在视口/父级的中心有一组包装元素（三或四列，两行）。

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

Answer 1

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

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

那么问题就解决了