Why isn't object-fit working? It only seems to work with inline styling in the image tag. Could it be the hero_media container affecting object-fit? I'm also attempting to use pseudo-elements (after and before) to add text to the image. Is it necessary to modify only the hero_media container?
Here 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???
}