CSS新手求助：如何让网格缩略图自适应高度避免溢出青色容器

刚接触CSS，目前无法实现缩略图高度的动态调整，导致缩略图溢出青色的course-container容器。

当前HTML代码对应包含25个项的最大网格布局，其他分类的项数更少。

现有代码 #

CSS代码 #

.course-container {
    display: grid;
    max-height: 5fr;
    width: 5fr;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5,1fr);
    background-color: cyan;
    margin: auto;
    padding: 1.5%;
    grid-gap: 3%;
    justify-content: space-around;
    align-items: center;
}

.course-container > div img {
    display: block;
    max-width: calc(100% - 10px);
    max-height: 1fr;
    opacity: 80%;
    border: 5px solid transparent;

    &:hover {
        opacity: 100%;
        transition: opacity 100ms ease-in-out;
    }
}
.course-container input[type=radio]:checked + label > img {
    border: 5px solid salmon;
    background-color: salmon;
    opacity: 100%;
    mask-image: linear-gradient(135deg, transparent 4%, gold 0),
                linear-gradient(-135deg, transparent 4%, gold 0),
                linear-gradient(45deg, transparent 4%, gold 0),
                linear-gradient(-45deg, transparent 4%, gold 0);
    mask-position: 0 0, 100% 0, 0 100%, 100% 100%;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
}

HTML代码 #

<div class="course-container">
    <div class="course-thumbnail mk8Courses">
        <input type="radio" name="course-thumbnail" id="Animal-Crossing" value="Animal Crossing"/>
        <label for="Animal-Crossing">
            <img src="images/courses/Animal-Crossing.png" alt='Animal Crossing'>
        </label>
    </div>
    <div class="course-thumbnail mk8Courses">
        <input type="radio" name="course-thumbnail" id="Big-Blue" value="Big Blue"/>
        <label for="Big-Blue">
            <img src="images/courses/Big-Blue.png" alt='Big Blue'>
        </label>
    </div>
    <div class="course-thumbnail mk8Courses">
        <input type="radio" name="course-thumbnail" id="Bone-Dry-Dunes" value="Bone-Dry Dunes"/>
        <label for="Bone-Dry-Dunes">
            <img src="images/courses/Bone-Dry-Dunes.png" alt='Bone-Dry Dunes'>
        </label>
    </div>
    <div class="course-thumbnail mk8Courses">
        <input type="radio" name="course-thumbnail" id="Bowsers-Castle" value="Bowser's Castle"/>
        <label for="Bowsers-Castle">
            <img src="images/courses/Bowsers-Castle.png" alt='Bowsers Castle'>
        </label>
    </div>
    <div class="course-thumbnail mk8Courses">
        <input type="radio" name="course-thumbnail" id="Cloudtop-Cruise" value="Cloudtop Cruise"/>
        <label for="Cloudtop-Cruise">
            <img src="images/courses/Cloudtop-Cruise.png" alt='Cloudtop Cruise'>
        </label>
    </div>
    <div class="course-thumbnail mk8Courses">
        <input type="radio" name="course-thumbnail" id="Dolphin-Shoals" value="Dolphin Shoals"/>
        <label for="Dolphin-Shoals">
            <img src="images/courses/Dolphin-Shoals.png" alt='Dolphin Shoals'>
        </label>
    </div>
    <div class="course-thumbnail mk8Courses">
        <input type="radio" name="course-thumbnail" id="Dragon-Driftway" value="Dragon Driftway"/>
        <label for="Dragon-Driftway">
            <img src="images/courses/Dragon-Driftway.png" alt='Dragon Driftway'>
        </label>
    </div>
    <div class="course-thumbnail mk8Courses">
        <input type="radio" name="course-thumbnail" id="Electrodome" value="Electrodome"/>
        <label for="Electrodome">
            <img src="images/courses/Electrodome.png" alt='Electrodome'>
        </label>
    </div>
    <div class="course-thumbnail mk8Courses">
        <input type="radio" name="course-thumbnail" id="Excitebike-Arena" value="Excitebike Arena"/>
        <label for="Excitebike-Arena">
            <img src="images/courses/Excitebike-Arena.png" alt='Excitebike Arena'>
        </label>
    </div>
    <div class="course-thumbnail mk8Courses">
        <input type="radio" name="course-thumbnail" id="Hyrule-Circuit" value="Hyrule Circuit"/>
        <label for="Hyrule-Circuit">
            <img src="images/courses/Hyrule-Circuit.png" alt='Hyrule Circuit'>
        </label>
    </div>
    <div class="course-thumbnail mk8Courses">
        <input type="radio" name="course-thumbnail" id="Ice-Ice-Outpost" value="Ice Ice Outpost"/>
        <label for="Ice-Ice-Outpost">
            <img src="images/courses/Ice-Ice-Outpost.png" alt='Ice Ice Outpost'>
        </label>
    </div>
    <div class="course-thumbnail mk8Courses">
        <input type="radio" name="course-thumbnail" id="Mario-Circuit-MK8.png" value="Mario Circuit - MK8"/>
        <label for="Mario-Circuit-MK8.png">
            <img src="images/courses/Mario-Circuit-MK8.png" alt='Mario Circuit - MK8'>
        </label>
    </div>
    <div class="course-thumbnail mk8Courses">
        <input type="radio" name="course-thumbnail" id="Mario-Kart-Stadium" value="Mario Kart Stadium"/>
        <label for="Mario-Kart-Stadium">
            <img src="images/courses/Mario-Kart-Stadium.png" alt='Mario Kart Stadium'>
        </label>
    </div>
    <div class="course-thumbnail mk8Courses">
        <input type="radio" name="course-thumbnail" id="Mount-Wario" value="Mount Wario"/>
        <label for="Mount-Wario">
            <img src="images/courses/Mount-Wario.png" alt='Mount Wario'>
        </label>
    </div>
    <div class="course-thumbnail mk8Courses">
        <input type="radio" name="course-thumbnail" id="Mute-City" value="Mute City"/>
        <label for="Mute-City">
            <img src="images/courses/Mute-City.png" alt='Mute City'>
        </label>
    </div>
    <div class="course-thumbnail mk8Courses">
        <input type="radio" name="course-thumbnail" id="Rainbow-Road-MK8" value="Rainbow Road - MK8"/>
        <label for="Rainbow-Road-MK8">
            <img src="images/courses/Rainbow-Road-MK8.png" alt='Rainbow Road - MK8'>
        </label>
    </div>
    <div class="course-thumbnail mk8Courses">
        <input type="radio" name="course-thumbnail" id="Shy-Guy-Falls" value="Shy Guy Falls"/>
        <label for="Shy-Guy-Falls">
            <img src="images/courses/Shy-Guy-Falls.png" alt='Shy Guy Falls'>
        </label>
    </div>
    <div class="course-thumbnail mk8Courses">
        <input type="radio" name="course-thumbnail" id="Sunshine-Airport" value="Sunshine Airport"/>
        <label for="Sunshine-Airport">
            <img src="images/courses/Sunshine-Airport.png" alt='Sunshine Airport'>
        </label>
    </div>
    <div class="course-thumbnail mk8Courses">
        <input type="radio" name="course-thumbnail" id="Super-Bell-Subway" value="Super Bell Subway"/>
        <label for="Super-Bell-Subway">
            <img src="images/courses/Super-Bell-Subway.png" alt='Super Bell Subway'>
        </label>
    </div>
    <div class="course-thumbnail mk8Courses">
        <input type="radio" name="course-thumbnail" id="Sweet-Sweet-Canyon" value="Sweet Sweet Canyon"/>
        <label for="Sweet-Sweet-Canyon">
            <img src="images/courses/Sweet-Sweet-Canyon.png" alt='Sweet Sweet Canyon'>
        </label>
    </div>
    <div class="course-thumbnail mk8Courses">
        <input type="radio" name="course-thumbnail" id="Thwomp-Ruins" value="Thwomp Ruins"/>
        <label for="Thwomp-Ruins">
            <img src="images/courses/Thwomp-Ruins.png" alt='Thwomp Ruins'>
        </label>
    </div>
    <div class="course-thumbnail mk8Courses">
        <input type="radio" name="course-thumbnail" id="Toad-Harbor" value="Toad Harbor"/>
        <label for="Toad-Harbor">
            <img src="images/courses/Toad-Harbor.png" alt='Toad Harbor'>
        </label>
    </div>
    <div class="course-thumbnail mk8Courses">
        <input type="radio" name="course-thumbnail" id="Twisted-Mansion" value="Twisted Mansion"/>
        <label for="Twisted-Mansion">
            <img src="images/courses/Twisted-Mansion.png" alt='Twisted Mansion'>
        </label>
    </div>
    <div class="course-thumbnail mk8Courses">
        <input type="radio" name="course-thumbnail" id="Water-Park" value="Water Park"/>
        <label for="Water-Park">
            <img src="images/courses/Water-Park.png" alt='Water Park'>
        </label>
    </div>
    <div class="course-thumbnail mk8Courses">
        <input type="radio" name="course-thumbnail" id="Wild-Woods" value="Wild Woods"/>
        <label for="Wild-Woods">
            <img src="images/courses/Wild-Woods.png" alt='Wild Woods'>
        </label>
    </div>
</div>

内容的提问来源于stack exchange，提问作者PsychedelicSeal