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

问题描述

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

解决方法

在 style 属性中，您设置了宽度和高度，而您的 CSS 文件仅设置了 max-width 和 max-height。

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