如何解决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 文件更改为宽度和高度。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。