I would like the pictures to have a height based on their width. The author's original design (see links in comments at top of CSS) calculated their height based on the Viewport width. I want my gallery in a fixed-width space. I assumed if I gave a percentage, it would be of the parent ul.gallery. Instead, the images (blue border) are short and don't fill the vertical space to the next row (red border)

How do I get the image's height based on the width of the container? - I assume the containing element is ul.gallery...am I wrong?

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 >
    <ul >
        <li id="mockups-001">
            <a href="#mockups-001"  title="Zoom In">
                <img src="https://via.placeholder.com/990x738.png#PLX" width="990" height="738" alt="" loading="lazy">
            </a>
            <a href="#close"  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"  title="Zoom In">
                <img src="https://via.placeholder.com/990x738.png#PLX" width="990" height="738" alt="" loading="lazy">
            </a>
            <a href="#close"  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"  title="Zoom In">
                <img src="https://via.placeholder.com/990x738.png#PLX" width="990" height="738" alt="" loading="lazy">
            </a>
            <a href="#close"  title="Zoom Out">
                <img src="https://via.placeholder.com/990x738.png#PLX" width="990" height="738" alt="" loading="lazy">
            </a>
        </li>
    </ul>
</div>

CodePudding user response：

You can try to use min-height instead of height in below CSS property.

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

Replace to

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