object-fit not working, did the container affect the object-fit

Question

the object-fit is not working, I don't know why. it only works with inline-style in the image tag. can anyone explain, please? maybe the hero_media container affecting the object-fit?. I'm also trying to use a pseudo-element (after and before ) to add text to the image. do need to modify only the hero_media container

        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???
}

Answer 1

In the style prop you are setting width and height, whereas your CSS file is setting only max-width and max-height.

Change your CSS file to be width and height.