最近在做小程序自定义导航栏,为导航栏设置背景图,但是各个机型导航栏高度不同,同一张背景图如何自适应,而不被拉伸或压缩。
方案一
背景图宽度100%,高度自动,这种方案适用于固定宽高的元素,并允许背景图溢出
background-image: url(img.jpg);
background-position: center top;
background-size: 100% auto;
方案二
不希望图像溢出,但允许容器元素根据背景图调整大小,保证元素的宽高比
根据背景图的大小创建固定宽高比的容器元素,方法是将高度设为0,通过padding-bottom撑开元素
height: 0;
// 百分比:图像的高度除以其自身的宽度,然后乘以100
padding-bottom: calc((height / width) * 100 + '%');
background-image: url(img.jpg);
background-position: center center;
background-size: 100%;
background-repeat: no-repeat;
方案一的特点是元素本身宽高固定,在保证背景图宽度100%的情况下,允许高度自适应,但是可能会溢出,或达不到元素本身的高度。
方案二允许元素根据背景图的大小而改变,保证了背景图的完整性。
两种方案需要根据场景自行选择尝试