css实现宽度为100%的元素背景图高度自动

最近在做小程序自定义导航栏，为导航栏设置背景图，但是各个机型导航栏高度不同，同一张背景图如何自适应，而不被拉伸或压缩。

方案一

背景图宽度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%的情况下，允许高度自适应，但是可能会溢出，或达不到元素本身的高度。
方案二允许元素根据背景图的大小而改变，保证了背景图的完整性。

两种方案需要根据场景自行选择尝试