这里没有看懂

同学你好，2:1的原因如下：

由于padding-bottom会增大元素的高度。初始时，元素高度是0，而父元素宽度是200px，那么padding-bottom设置成50%后，padding-bottom的实际值就是100px，所以元素的高度就是100px，如下：

而padding-left、padding-right会增大元素的宽度而非高度，所以我们不使用padding-left、padding-right（我们想让元素有高度，并且宽高比成固定比例）。

祝学习愉快!

同学你好，问题解答如下：

1.“height: 0;padding-bottom: 50%;”这句代码，是设置给“.swiper-container”的，如下：

目的就是让“.swiper-container”的宽高比始终为2:1。

由于“.swiper-container”的宽度是100%（它是块级元素，宽度默认是100%），所以在不同的屏幕下，它的实际宽度是不同的，所以如果想实现其宽高比始终为2：1，就可以采用“height: 0;padding-bottom: 50%;”这两句代码实现。

这两句代码具体含义如下：

由于padding会增大元素的尺寸，所以设置height:0;时，再设置padding，元素的尺寸会被增大，如下：

当padding-bottom设置成百分比时，它参考的是父元素的宽度，所以padding-bottom: 50%;的含义就是padding-bottom的值，是父元素宽度的一半，假如父元素宽度是200px，那么padding-bottom: 50%;就对应着padding-bottom:100px;，这样就实现了宽高比是2：1（200:100）。

2. 下面的那句解释中，“padding-bottom：25%；”是设置“icon”的样式，即让icon的宽度是25%的正方形，如下：

实现方式，依旧是利用padding，即设置“padding-bottom: 25%;”，含义就是，padding-bottom的值，是父元素宽度的25%，即等价于icon的高度是父元素宽度的25%，而icon的宽度也是25%，这样icon就实现了宽高相等。比如父元素宽度是200px，那么icon的宽度就等于50px（icon样式中，设置了   width: 25%；），高度也等于50px（padding-bottom：25%；），因此icon的宽高一样。

同学再试着理解一下。

如果我的回答帮到了你，欢迎采纳，祝学习愉快！