I'm encountering a CSS problem. While Firefox is showing the content as I want it, Chrome seems to be collapsing the grid and not displaying the image at its expected height.
My goal: The image should take up maximum space without exceeding the column's width. The row height should adjust according to the image's height.
The suggestions discussed in this thread are causing the following issue: Controlling the size of an image within a CSS Grid layout
relevant 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>
Relevant 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;
overflow:hidden;
}
Chrome (image should stretch the full length):
https://i.sstatic.net/MgkxU.png
Firefox (displays the image correctly, or how I intend): https://i.sstatic.net/odRkn.jpg