<li><a href="#"><img src="data:images/audio.jpg" alt=""></a></li>
样式：
li{
height:300px;
a{
display: block;
img{
width:100%;
height:100%;
}
}
}
效果如图:
知识补充：默认宽高是浏览器自动计算的inline元素内文本占据的行高等的高度，所以可以设置背景颜色。
inline元素的高度与font-size相关，但不是font-size决定,涉及到匿名框，行框，行内框，内容区等
网上查的答案1：
原因：
a元素下有一个匿名文本，这个文本外有一个匿名行级盒子，它有的默认vertical-align是baseline的，而且往往因为上文line-height的影响，使它有个line-height，从而使其有了高度，因为baseline对齐的原因，这个匿名盒子就会下沉，往下撑开一些距离，所以把a撑高了。
解决办法一是消除掉匿名盒子的高度，也就是给a设置line-height:0或font-size:0;
解决办法二是给两者vertical-align:top，让其top对齐，而不是baseline对齐
解决办法三是给img以display:block，让它和匿名行级盒子不在一个布局上下文中，也就不存在行级盒的对齐问题
其他解决办法也有，但这些都是从根本上解决问题
网上查的答案2：
终于找到原因了，因为img是行内元素，默认display: inline; 它与文本的默认行为类似，下边缘是与基线对齐，而不是紧贴容器下边缘。将displayp设置为block即可消除上面说的几个像素的差别。
或者将font-size设为0。也可以将a标签的display设置为block或者inline-block，并将其行高line-height设为0。