CSS是网页开发中必不可少的工具之一，它可以控制元素的外观和布局。然而，有时候我们在使用CSS时会遇到一些问题，比如图片不能占满li。

ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
display: inline-block;
width: 25%;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}

在上面的代码中，我们使用了一个ul和四个li来展示一组图片，并且将它们设置为等宽的。（注意：在实际开发中我们可能会使用更复杂的HTML结构和CSS样式。）

但是，我们发现图片并没有占满li元素，留下了空白的区域。这是由于图片的默认display属性是inline，而inline元素是不能设置宽度和高度的。因此，我们需要将图片的display属性设置为block或inline-block，才能够设置宽度和高度。

img {
display: block;
max-width: 100%;
height: auto;
}

这样，我们就能够让图片占满li元素了。如果我们想要图片垂直居中，可以使用flex布局：

ul {
display: flex;
justify-content: space-between;
align-items: center;
}
li {
flex: 1;
}
img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}

最后，为了使我们的代码看起来更清晰，我们可以使用pre标签来展示我们的代码：

<ul>
<li><img src="xxx.jpg" alt="xxx"></li>
<li><img src="xxx.jpg" alt="xxx"></li>
<li><img src="xxx.jpg" alt="xxx"></li>
<li><img src="xxx.jpg" alt="xxx"></li>
</ul>
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
display: inline-block;
width: 25%;
text-align: center;
}
img {
display: block;
max-width: 100%;
height: auto;
}

希望这篇文章能够帮助你解决图片不能占满li的问题。