CSS网格中的图像-如何使行高由内容（图像）高度确定？ Chrome 与在 Firefox 中正确呈现

Question

我有一个 CSS 问题。 Firefox 以我想要的方式呈现内容，但是，chrome 会折叠网格并且不会在它应该的高度显示图像。

我的意图： 图像应尽可能大，但不超过列宽。行高应取自图像的结果高度。

此线程中讨论的建议导致以下问题： Controlling the size of an image within a CSS Grid layout

相关 HTML：

<div id="studentWork" class="studentWorkWrapper" style="display: grid;">

    <img class="studentWorkNarrative" style="grid-column: 5 / span 5; grid-row: 5 / span 1;" src="http://tempdomain1.com/wp-content/uploads/2020/10/Joel_Delgado_GCC_Penseive_Chamber_View_02.jpg" alt="Joel_Delgado_GCC_Penseive_Chamber_View_02">

    <p class="studentWorkNarrative" style="grid-column: 1 / span 4; grid-row: 5 / span 1;">
        <span class="studentWorkKey">BACKGROUND</span>
        I am a student who originated from Aguascalientes, Mexico. When I arrived in Los Angeles, California, more than a decade ago, I was amazed at the design of the Disney Concert Hall located in Downtown Los Angeles. I am inspired to see more fantastic architecture styles such as contemporary, modern, gothic, and traditional Japanese buildings. I would like to become an Architect. I am currently employed in a Landscaping Firm as a Landscape Designer, meanwhile attending Glendale Community College and taking Architecture courses. I have a good G.P.A., and I would like to transfer to Woodbury University or U.S.C. and hoping to win a scholarship prize. 
    </p>

    <img class="studentWorkNarrative" style="grid-column: 5 / span 5; grid-row: 6 / span 1;" src="http://tempdomain1.com/wp-content/uploads/2020/10/Joel_Delgado_GCC_Penseive_Chamber_Layers_03.jpg" alt="Joel_Delgado_GCC_Penseive_Chamber_Layers_03">

    <p class="studentWorkNarrative" style="grid-column: 1 / span 4; grid-row: 6 / span 1;">
        <span class="studentWorkKey">IMPETUS</span>
        Knowing this project is a Senior Housing, my inspiration was the connection I had with my late grandfather. He was an adventurous, athletic, and extremely chatty man. I remember when I was younger, he would take my siblings and me to campgrounds all over Mexico. On our trips to forests, lakes, and cliffsides, he would always teach us how to tie knots, start a safe bonfire, and how to hold a knife properly. However, there is one thing he shared with us more valuable than all. He would share stories in the night sky next to a lake reflecting the moon with the smell of freshly roasted marshmallows. He engraved in our minds; knowledge, wisdom, and humor to all of us. Recently realizing he was giving us the gift of eternal memories with him that I will always hold dear to my soul. My inspiration is the gift of knowledge and memories from a wise old person. Sharing memories and pass them down to the next generation reminded me of one of my favorite books and movie franchises; Harry Potter. In a specific scene from Harry Potter, an instrument called “The Pensieve” is used to review memories that can be shared. In this scene, Dumbledore shares his past experiences with Harry Potter as a teaching experience. The mirror pond represents the pensieve itself, and the garden is the chamber. Thus the name “The Pensieve Chamber” came to be. 
    </p>

</div>

相关CSS：

img, video, p, .studentWorkContent {
    
    overflow:hidden;
    object-fit: cover;
    max-width: 100%;
    height: 100%;

}

div.studentWorkWrapper{
    
    position:relative;
    padding:1rem 1rem 10rem 1rem; /* top right bottom left */
    margin-top:1rem;
    margin-bottom:1rem;
    
    grid-column-gap: 1em;   
    grid-row-gap: 1em;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto auto auto auto auto auto auto auto;
    grid-auto-flow: column;

    overflow:hidden;

}

Chrome（图片应拉长）：

Firefox（正确显示图像，或按我的意图显示）：

Answer 1

添加以下内容解决了这个问题：

img, video, p, .studentWorkContent {
    
    overflow:hidden;
    object-fit: cover;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;

}

Chrome 似乎需要将高度和宽度设置为自动才能正常工作。添加此项后，内容呈现与 firefox 相同，并且网格行会根据内容的大小进行调整。