用重复的图像填充 div 而不剪切最后一张图像答案

【问题标题】：Fill a div with repeated images without cutting the last image用重复的图像填充 div 而不剪切最后一张图像
【发布时间】：2022-01-25 09:53:25
【问题描述】：

我一直在尝试重复图像而不剪切最后的图像，我尝试了普通的背景图像样式来重复图像，但你不能总是得到完美的结果。我已将背景图像设置在 li 内的绝对 span 位置，span 有 86% 的 li 所以我可以看到最后一个字母的一点点。

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

在第一个示例中，图像适合 li 的 86%，因为有足够的空间，但在第二个示例中，图像被剪切。正如我所说，我使用了背景图像样式。

有没有办法使用 javascript 将 86% 甚至 100% 的 li 与已完成的图像相匹配

这是一个例子https://jsfiddle.net/4cfjd10a/

【问题讨论】：

标签： javascript html css

【解决方案1】：

background-repeat: space 和 background-size: contain 能否完成您所追求的目标？

来自MDN background-repeat docs：

图像尽可能多地重复而不被剪裁。第一个和最后一个图像固定在元素的任一侧，并且空白在图像之间均匀分布。 background-position 属性将被忽略，除非只能显示一张图像而不进行裁剪。使用空间进行剪切的唯一情况是没有足够的空间来显示一张图像。

这个例子是从你的小提琴中复制而来的。我已经删除了 span 和相应的 css，并添加了 li a css 规则：

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>

【讨论】：

你的回答让我进入了后台重复：回合，谢谢 ;)

【解决方案2】：

我可以看到不需要 JavaScript 的问题解决方案，但这取决于“完美”对您意味着什么。我可以看到解决您的问题的两种可能性：

1.重复的图像长度相同 Background Repeat Same Length Image

然后只需将您的 ul li 跨度宽度设置为 170 像素而不是 86%。看到你的元素对调整大小没有响应，使用一个固定的宽度值应该在样式中起作用。

2。重复的图像需要跨越不同的长度 Background Repeat Different Length Image 为此，只需将一个类添加到您的跨度中，无论宽度不是默认值，并相应地设置宽度。

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

.specialized {
  width: 204px;
}

【讨论】：