padding-top方法实现响应式背景图片

分类: 文章 • 2025-01-03 20:10:40

使用padding-top方法实现响应式背景图片

保持元素的宽高比，为元素添加垂直方向padding-top值，使用百分比形式：

padding-top=（高度/宽度）*100%;

还需要添加background-size:cover属性让北京元素铺满，为兼容IE8以下浏览器，还需要添加background-position:center属性，同时保证图片的宽或高最大等于它父容器的宽或高。
代码如图所示：
padding-top方法实现响应式背景图片