Объектная подгонка не работает, повлиял ли контейнер на объектную подгонку

объектная подгонка не работает, я не знаю, почему. он работает только со встроенным стилем в теге изображения. кто-нибудь может объяснить, пожалуйста? может быть, контейнер hero_media влияет на соответствие объекта? Я также пытаюсь использовать псевдоэлемент (после и до), чтобы добавить текст к изображению. нужно изменить только контейнер hero_media

        this is my code
import React from "react";
import Navbar from "../navbar/Navbar";
import Footer from "../footer/Footer";
import donation from "./donation.css";

const Donation = () => {
    return (
        <div>
            <div className = "content_wrap">
                <Navbar />
                <div className = "hero_media">
                    <img
                        //style = {{ objectFit: "fill", width='100%', height:'100%' }}// this is work
                        src = {process.env.PUBLIC_URL + "/assets/donation.jpg"}
                        alt = "donation image"
                        className = "image"
                    />
                </div>
            </div>
            <Footer />
        </div>
    );
};

export default Donation;

 Css file   
content_wrap {
    padding-bottom: 300px;
    height: 100%;
}
.hero_media {
    padding-top: 2px;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    height: 500px;
    box-shadow: rgb(20, 20, 20) 0 0 10px;
}
/*------------------IMAGE-------------*/

.image {
    max-width: 100%;
    max-height: 100%;
    object-fit: fill;//this is not working???
}