object-fit 不起作用，容器是否影响了 object-fit

Question

对象匹配不起作用，我不知道为什么。它仅适用于图像标签中的内联样式。谁能解释一下？也许 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???
}

Answer 1

您在样式道具中设置宽度和高度，而您的 CSS 文件仅设置最大宽度和最大高度。

将您的 CSS 文件更改为宽度和高度。

object-fit 不起作用，容器是否影响了 object-fit

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

html

css

image

reactjs

object-fit