在这个网格中，图像的高度是如何计算的？

Question

我希望图片的高度基于它们的宽度。 作者的原始设计（参见 CSS 顶部评论中的链接）根据视口宽度计算了它们的高度。 我希望我的画廊位于固定宽度的空间中。 我假设如果我给出一个百分比，它将是父级 ul.gallery。 相反，图像（蓝色边框）很短，不会填充下一行的垂直空间（红色边框）

如何根据容器的宽度获取图像的高度？ - 我假设包含元素是 ul.gallery...我错了吗？

https://codepen.io/kalmdown/pen/poZvBGm

 /** * Siple Gallery, V4b (WIP) * * V1: https://codepen.io/bramus/pen/pogLgwZ * V2: https://codepen.io/bramus/pen/abdjLBx * V3: https://codepen.io/bramus/pen/eYJjGgQ * V4: https://codepen.io/bramus/pen/GRoaXQJ */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; }.container { flex: 1 0 auto; margin: auto; max-width: 900px; display: flex; flex-direction: column; flex-shrink: 0; gap: $gap; padding: 10px 10px 10px 10px; border: gray 1px solid; } ul.gallery { --numcolumns: 4; --gap: 0.25em; --size: calc(100% / var(--numcolumns)); display: grid; grid-template-columns: repeat(var(--numcolumns), 1fr); grid-template-rows: auto; gap: var(--gap); align-items: stretch; list-style: none; border: red 1px solid; } ul.gallery > li { display: block; height: calc(var(--size) - var(--gap)); position: relative; border: blue 1px solid; } ul.gallery > li.wide { grid-column: span 2; } ul.gallery > li.wider { grid-column: span 3; } ul.gallery > li.high { grid-row: span 2; height: auto; /* to undo the height */ } ul.gallery > li > a.zoomout { display: none; } ul.gallery > li > a, ul.gallery > li > a > img { display: block; width: 100%; height: 100%; object-fit: cover; } ul.gallery > li > a.zoomin:hover::after, ul.gallery > li > a.zoomin:focus::after { content: ""; display: block; background: rgba(255, 255, 255, 0.2) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZmlsbD0ibm9uZSIgaGVpZ2h0PSIyNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxMSIgY3k9IjExIiByPSI4Ii8+PGxpbmUgeDE9IjIxIiB4Mj0iMTYuNjUiIHkxPSIyMSIgeTI9IjE2LjY1Ii8+PGxpbmUgeDE9IjExIiB4Mj0iMTEiIHkxPSI4IiB5Mj0iMTQiLz48bGluZSB4MT0iOCIgeDI9IjE0IiB5MT0iMTEiIHkyPSIxMSIvPjwvc3ZnPg==) no-repeat 50% 50%; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; } ul.gallery > li:focus-within, ul.gallery > li:target { overflow: visible; z-index: 1; } /* Make sure tile of active image is on top */ ul.gallery > li:target { z-index: 2; } /* Hide zoom in link when the tile is targetted */ ul.gallery > li:target > a.zoomin { display: none; } /* Show zoom out (close) link when the tile is targetted */ ul.gallery > li:target > a.zoomout { display: block; top: 0; right: 0; bottom: 0; left: 0; position: fixed; z-index: 12; } /* Stretch out the image */ ul.gallery > li > a.zoomout > img { object-fit: contain; padding: 1vw; top: 0; right: 0; bottom: 0; left: 0; position: fixed; z-index: 11; background: rgba(0, 0, 0, 0.8); } /* Put close link on top */ ul.gallery > li:target > a.zoomout::after { content: "Click or hit ESC to close"; position: fixed; right: 1vw; bottom: 1vw; font-size: 1rem; color: #fff; z-index: 12; }

 <div class="container"> <ul class="gallery"> <li id="mockups-001"> <a href="#mockups-001" class="zoomin" title="Zoom In"> <img src="https://via.placeholder.com/990x738.png#PLX" width="990" height="738" alt="" loading="lazy"> </a> <a href="#close" class="zoomout" title="Zoom Out"> <img src="https://via.placeholder.com/990x738.png#PLX" width="990" height="738" alt="" loading="lazy"> </a> </li> <li id="mockups-002"> <a href="#mockups-002" class="zoomin" title="Zoom In"> <img src="https://via.placeholder.com/990x738.png#PLX" width="990" height="738" alt="" loading="lazy"> </a> <a href="#close" class="zoomout" title="Zoom Out"> <img src="https://via.placeholder.com/990x738.png#PLX" width="990" height="738" alt="" loading="lazy"> </a> </li> <li id="mockups-003"> <a href="#mockups-003" class="zoomin" title="Zoom In"> <img src="https://via.placeholder.com/990x738.png#PLX" width="990" height="738" alt="" loading="lazy"> </a> <a href="#close" class="zoomout" title="Zoom Out"> <img src="https://via.placeholder.com/990x738.png#PLX" width="990" height="738" alt="" loading="lazy"> </a> </li> </ul> </div>

Answer 1

您可以尝试在下面的 CSS 属性中使用min-height而不是height 。

ul.gallery > li {
    height: calc(var(--size) - var(--gap));
}

替换为

ul.gallery > li {
    min-height: calc(var(--size) - var(--gap));
}