页面宽度改变图片的高度也会跟着改变，老师说的利用padding和定位实现一个正方形好像是多余的
来源：4-3 热卖推荐--结构和样式
慕容9472869
2020-01-19 10:53:07
老师的代码里将img用p标签封装，一开始不明白为啥这样封装，后来发现是老师要用padding和定位实现图片区域正方形，而我没有用p封装img，发现图片区域的高度会自动随宽度改变，仍然是一个正方形，敢问老师在这一部分的代码是不是多余的。
写回答
1回答
-
同学你好，不是的， 这部分代码主要是为了确保图片以正方形显示。
因为在 CSS 盒模型中，按照规定margin, padding 的百分比数值是相对父元素宽度 的宽度计算的。由此只需将元素垂直方向的一个 padding 值设定为与 width 相同的百分比就可以制作出自适应正方形了，因为这里实际上是使用padding-top撑开盒子的高度，而padding-top是根据父元素的width进行计算的，所以父元素的width变化成多少，padding-top也会等比例的进行变化，这样，实际上也就是保证了width和padding-top撑开的高度始终等比例缩放，也就是会形成正方形了。
按着同学的方法，直接给图片设置宽度，让高度自动随宽度改变，如果这个图片原本就是一个长方形的，高度自动改变后，也还是以长方形显示的，如果这个图片原本就是一个正方形的， 高度自动改变后，继续以正方形显示，这样可能就会导致布局错乱。
建议：同学参考老师的方式实现效果，确保图片一定是以正方形显示在页面上。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题