2回答

好帮手慕言

2020-04-25

已采纳

同学你好，第一段文字理解的是正确的。

另外：设置正方形是为了占位，图片是正方形的，但是在没有设置宽高的情况下，图片较大，如下：

设置正方形是为了图片可以等比例的缩放，不让图片变形。

祝学习愉快~

0

好帮手慕言

2020-04-25

同学你好，这里写成正方形是因为图片是正方形的哦，使用width：100%和padding-top:100%实现正方形是为了保证在不同的设备上，都是按照正方形显示，不变形。原理是：

在 CSS 盒模型中，按照规定padding 的百分比数值是相对父元素的宽度计算的。由此只需将元素垂直方向的一个 padding 值设定为与 width 相同的百分比就可以制作出自适应正方形了，因为这里是使用padding-top撑开盒子的高度，而padding-top是根据父元素的width进行计算的，所以父元素的width变化成多少，padding-top也会等比例的进行变化，这样，实际上也就是保证了width和padding-top撑开的高度始终等比例缩放，也就是会形成正方形了

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

0

h0hours

h 老师的意思应该是，这么设置是为了保证，图片父元素的padding-top和width相等，就形成了一个正方形的"容器"，通过position将图片放在容器里。应该是这个意思吧？ 还是不太理解，图片本身就是正方形的，不管父元素的宽度如何变化，也不能改变它是正方形吧？就像我第二张截图那样。那感觉意义不大？还是我理解有偏差，麻烦老师解答

h020-04-25

共1条回复