Fill a div with repeated images without cutting the last image

I have been trying to repeat images without cutting the last images, i have tried the ordinary background-image style to repeat the image but u can’t always get the perfect results.
I have set the background image in a position absolute span inside li the span has 86% of the li so i can see a little of the last letter.

background-image: url(https://source.unsplash.com/jTSf1xnsoCs);
background-size: auto 51px;

In the first example the images fit the 86% of the li cause there is enough space, but in the second one the image is cutted. as i said i have used the background-image style.

enter image description here

Is there a way to fit the 86% or even 100% of li with completed images using javascript

Here is an example https://jsfiddle.net/4cfjd10a/