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

我有一个CSS问题。Firefox以我所希望的方式呈现内容，然而，chrome会折叠网格，并且不会以假定的高度显示图像

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

本线程中讨论的建议导致以下问题：

相关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>

Chrome（图像应延伸至整个长度）：

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

---

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

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

}

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

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

}