Question

我做了一些挖掘工作，但是似乎找不到解决此问题的任何方法。我有一组随机的图像（有时是1张，有时是128张），我想在占据整个视口的网格中排成一行。如果它不能占据高度的100％（如果只有一张图像），那很好，但是我希望它仍显示整个屏幕宽度并且不超过视口的高度。我遇到的问题是我的电网仍在扩展到超过100vh。有什么想法吗？

<ul id="logos" class="logo-list">
  <c:forEach var="company" items="${companies}">
    <c:set var="logo" value="${company.getCompanyLogoUrl()}" />
    <c:set var="site" value="${company.getCompanySiteUrl()}" />
    <li class="logo-list-item">
      <a href="${site}"><img src="${logo}" height="150" width="150" class="popup" /></a>
    </li>
  </c:forEach>
</ul>

到目前为止，我的CSS：

img {
  max-width: 100%;
}

.logo-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: repeat(auto-fit, minmax(100px, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100vh;
}

.logo-list-item {
  display: block;
}

然后是JSFiddle：https://jsfiddle.net/pqhe6sn1/

CSS网格-使任意数量的元素填充视口的宽度和高度

0 个答案: