Fill a div with repeated images without cutting the last image-CodePudding

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.

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/

CodePudding user response：

Does background-repeat: space along with background-size: contain accomplish what you're after?

From the MDN background-repeat docs:

The image is repeated as much as possible without clipping. The first and last images are pinned to either side of the element, and whitespace is distributed evenly between the images. The background-position property is ignored unless only one image can be displayed without clipping. The only case where clipping happens using space is when there isn't enough room to display one image.

This example is copied from your fiddle. I've removed the spans and corresponding css, and added the li a css rule:

ul {
  padding-left: 0;
  list-style: none;
  font-size: 40px;
  line-height: 51px;
  font-weight:bold
}
ul li {
  margin-bottom: 20px;
}
ul li a {
    position: relative;
    display: table-caption;
    
}
li a {
  background-image: url(https://source.unsplash.com/jTSf1xnsoCs);
  background-repeat: space;
  background-size: contain;
}

<ul>
  <li>
    <a href="#">
      Specialized
    </a>
  </li>
  <li>
    <a href="#">
      Optimized
    </a>
  </li>
</ul>

CodePudding user response：

I can see solutions to your issue that do not require JavaScript but it would depend on what "perfect" means to you. There are 2 possibilities that I can see to solving your problem:

1. The repeated images are the same length Background Repeat Same Length Image

Then simply by setting your ul li span width to 170px instead of 86%. Seeing that your elements are not responsive to resizing, using a solid value for width should work in the styling.

2. The repeated images need to span different lengths Background Repeat Different Length Image For this, simply have a class added to your span for whichever width is not default and set the width accordingly.

<ul>
  <li>
    <a href="#">
      Specialized
      <span ></span>
    </a>
  </li>
  <li>
    <a href="#">
      Optimized
      <span></span>
    </a>
  </li>
</ul>

.specialized {
  width: 204px;
}