作为一名Web开发人员，通常很尴尬地使用HTML元素，而与img元素相比，HTML元素本身既没有固定的大小，也没有固定的长宽比。 通常，您希望实现这些对象的响应行为，但要保持宽度和高度之间的比例。 默认情况下，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
这导致以下结果:
...