作为一名 Web 开发人员，您经常会发现自己在使用 HTML 元素时陷入困境，这些元素（例如与 img 元素不同）既没有固定的大小，也没有固定的宽高比。通常，您希望确保这些对象的行为具有响应性，但宽度和高度之间的比例保持不变。默认情况下，CSS 在这里不提供直观的解决方案。但借助垂直填充属性，您可以实现您的目标。
我们以常见的方形产品图片为例。虽然图片本身不一定是正方形，但我们希望以 1:1 的宽高比显示它们，并且无需任何额外的处理或变形，同时它们的宽度（以及高度）也应该能够响应式地变化。以下代码可以轻松地使用 CSS 实现这一点，无需任何额外的标记。:
1bc3a80de3db90cdf0535541236d95f2
结果:
但为什么会这样以及如何创建其他纵横比呢？关键在于 padding 属性，该属性（以百分比值指定）始终基于与 Width 属性（即父元素的宽度）相同的基本值。这对于 padding-left 和 padding-right 来说很明显，对于 padding-top 和 padding-bottom 来说令人惊讶，但在这种情况下非常有帮助。
例如，如果您想将宽高比设置为16：9，则可以选择width：100％; padding-bottom：56.25％;。 考虑到黄金分割率的长宽比为：宽度：100％；底部填充：61.81％； 可实现的。
借助calc，您可以直接指定宽高比，例如对于16：9（具有padding-bottom）：calc（1 /（16/9）* 100％）。 如果该元素由其他嵌套元素组成，则将子元素放置在绝对位置以补偿父元素的填充:
1bc3a80de3db90cdf0535541236d95f2
这导致以下结果:
...