无高度li,背景图片自适应的解决方法

1...如果是纯图片展示img设置width:100%；height:auto;

1...如果是纯图片展示img设置width:100%；height:auto;
<li class="one">
<img src = '', >
</li>

2...如果作为背景，在父元素上设置position: relative;background-size:100% auto,高度由padding-top设置百分比撑开，然后子元素通过绝对定位来承载其它内容
>```
<li class='two'>
</li>
----------------------------
li {
  float: left;
  width: 20%;
  padding: 7% 0;
~~~
  font-size: 10px;
  font-weight: bolder;
  color: #a9a9a9;
  border-right: 1px solid #cacaca;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  background-size: 100% auto;
~~~
}
li:after{
  display: block;
  content: ".";
~~~
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url('/images/APPicon/tab/fa_icon.png') center center no-repeat;
  background-size: 100% 100%;
~~~
}

tab