大家好！

本人新手，刚开始做前端，要设计一个响应式标签页，但是要用图像填充标题。目前尝试了两种办法，都有一些问题。标签页的使用参照了该教程：
http://www.w3cschool.cc/bootstrap/bootstrap-tab-plugin.html
一个办法是将tabs中的li项添加background-image（如下所示），该办法最能满足我的需求，问题在于我不需要文字，所以标题非常矮，图像不能完整显示。不知道怎么修改高度？

    <ul class="nav nav-tabs" role="tablist">
      <li class="active" "background-image:url('1.png'); background-size:cover;"><a href="#"></a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
    </ul>

另一个方法是直接将img作为li的内容，但这个时候标题的大小又取决于图像大小，图片不像背景图像那样可以完整填充，大小也不易控制。

    <ul class="nav nav-tabs" role="tablist">
      <li class="active"><a href="#"><img src="1.png" class="img-responsive" width="100%" height="100%"></a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
    </ul>

折腾了好久，求指导，有没有好的解决办法？本人刚开始接触HTML/CSS/javascript。