纯CSS实现高宽比自动缩放响应式布局
想要在前端实现高宽比自动缩放？这个纯CSS方案挺，适用于常见的 16:9 比例，比如图片或视频。通过调整容器的宽度，就能自适应调整高度，适合做响应式布局。不需要 JavaScript，完全靠CSS实现，减少了页面的复杂性和性能压力。
其实只需要通过padding-top的技巧来调整比例，计算公式是：padding-top: (高度 / 宽度) * 100%。比如 16:9 格式，padding-top: 56.25%就能达到效果。
如果你要在响应式页面里使用，可以把它作为一个容器，轻松控制内部元素的缩放，保证一致性。嗯，整体效果还是挺不错的，且兼容性好，不用担心在主流浏览器中无法显示。
需要注意的是，比例的计算可以根据不同需求调整，灵活性还是蛮高的。比如，想用其他比例，只需更改公式即可。
文件大小：360B
评论区