html - 对象适合不工作,容器是否影响对象适合
问题描述
对象拟合不起作用,我不知道为什么。它仅适用于图像标签中的内联样式。任何人都可以解释一下吗?也许 hero_media 容器会影响对象匹配?我还尝试使用伪元素( after 和 before )向图像添加文本。只需要修改 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???
}
解决方案
在样式道具中,您设置宽度和高度,而您的 CSS 文件仅设置最大宽度和最大高度。
将您的 CSS 文件更改为宽度和高度。
推荐阅读
- amazon-web-services - 如何在同一 AWS 账户和区域中部署同一堆栈集的多个实例?
- jquery - 单击标题内的输入字段时,DataTables 过滤列
- javascript - 如何在贝塞尔曲线上找到中间标记?
- python - 将线性模型回归摘要输出为乳胶
- python - Cython:如何使用闭包对向量进行排序
- android - 是否可以检查 LocalTime.now 是否是 Kotlin 的晚上 9 点?
- nginx - TLS 记录协议版本如何在 nginx 中决定?
- python - 不明白这个 TypeError 的原因
- django - PostgreSQL (Django - Production) - 函数相似性(字符不同,未知) 不存在
- javascript - 协助在 Border JS 内组织用户输入