javascript - why is my image expanding with my outer div

Question

I have a css gird layout and within one of my divs whenever I add a image the div expands to the size of the image opposed to the image taking up the full height and width of the div. I am assuming this has something to do with using CSS grid as I have set both the height and width of my image to 100% and wrapped this in a wrapping div. Im not sure why the image is expanding to its own ratio outside the div.

my columns and rows should all be the same size ect but the image is making my second row and its elements expand to the size of the image.

how it looks:

How it should look with the image in the same place but filling the wrapper div.

css:

.text-block-wrapper {
    width: 100%;
    height: 1701px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top:5%;
    margin-bottom: 5%;
    @media (max-width: 1199.98px) { 
        height: 1300px;
    }
    @media (max-width: 767.98px) { 
        height: 1700px;
    }

}

.text-block-main-container {
    height:100%;
    width: 90%;
    max-width: 1472px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    @media (max-width: 767.98px) { 
        grid-template-columns:1fr;
        grid-auto-rows:300px ;
        
    } 
    grid-auto-rows: auto;
    gap: 10px;
}

.title-container {
    grid-column-start: 1;
    grid-column-end: 3;
    background-color: pink;
}

.block-container {
    background-color: blue;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows:1fr 1fr;
}

.image-container {
    background-color: blueviolet;
    width: 100%;

    .image-wrap {
        width: 100%;
        height: 100%;
    }

    img {
        height: 100%;
        width: 100%;   
    }
}

.overlay-block-container {
    background-color: brown;
    width: 90%;
    max-width: 641px;
    justify-self: center;
    transform: translateY(-40%);
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr, 1fr, 1fr;
}

.overlay-block-title {
    font-size: 12px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.overlay-block-sub-title {
    font-size:28px;
    display: flex;
    align-items: start;
    flex-wrap: wrap;
    justify-content: center;
}

.overlay-block-sub-title > div {
    display: flex;
    width: 100%;
    justify-content: center;
}

.overlay-description {
    margin-top: -50px;
    font-size: 18px;
}

.overlay-block-link {
    display: flex;
    justify-content: center;
}

.overlay-block-text {
    font-size: 18px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

html:

import React from 'react';

import logo from "../images/parking-tes.svg";

const TextBlockImages = ({ componentData }) => {
    return (
    <>
    <div className="title-container">
                    <span>Park Stories</span>
                </div>
        <div className="text-block-wrapper">
            
            <div className="text-block-main-container">
                <div className="block-container">
                    <div className="image-container">

                    </div>
                    <div className="overlay-block-container">
                        <div className="overlay-block-title">
                            <span>here is a title</span>
                        </div>
                        <div className="overlay-block-sub-title"> 
                            <div>
                                <span>here is a sub title</span>
                            </div>                                       
                            <div className="overlay-description">
                                <span>here is a description</span>
                            </div>
                        </div>
                        <div className="overlay-block-link">
                            <span>READ MORE</span>
                        </div>
                    </div>
                </div>
                <div className="block-container">
                    <div className="image-container">

                    </div>
                    <div className="overlay-block-container">
                        <div className="overlay-block-title">

                        </div>
                        <div className="overlay-block-sub-title">
                            
                        </div>
                        <div className="overlay-block-text">
                            
                        </div>
                        <div className="overlay-block-link">
                            
                        </div>
                    </div>
                </div>
                <div className="block-container">
                    <div className="image-container">

                    </div>
                    <div className="overlay-block-container">
                        <div className="overlay-block-title">

                        </div>
                        <div className="overlay-block-sub-title">
                            
                        </div>
                        <div className="overlay-block-text">
                            
                        </div>
                        <div className="overlay-block-link">
                            
                        </div>
                    </div>
                </div>
                <div className="block-container">
                    <div className="image-container">
                     
                    </div>
                    <div className="overlay-block-container">
                        <div className="overlay-block-title">

                        </div>
                        <div className="overlay-block-sub-title">
                            
                        </div>
                        <div className="overlay-block-text">
                            
                        </div>
                        <div className="overlay-block-link">
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </>
    )
}

export default TextBlockImages;

question from:https://stackoverflow.com/questions/66049886/why-is-my-image-expanding-with-my-outer-div

Answer 1

Waitting for answers