我试了很多东西，但都不行。 可能是原因的代码：（CSS）
article {
display: grid;
height: 100%;
grid-template-columns: 2fr 1fr;
grid-template-rows: 2fr 1fr;
overflow: hidden;
}
#article-image-section {
height: 100%;
width: 100%;
overflow: hidden;
}
.i-img {
width: 100%;
height: 100%;
object-fit: cover;
}
完整代码 - 包含完全不相关的内容：（CSS 和 HTML）
<!DOCTYPE html>
<html>
<head>
<title>JavaScript tests</title>
<link rel="icon" href="favicon.jpg">
<link rel="stylesheet" href="main.css">
<style>
button {
font-family: Tahoma, sans-serif;
background-color: #212121;
color: #fff;
border: 3px solid #587;
}
</style>
<script src="https://kit.fontawesome.com/2172e4ad38.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<div id="nav-logo-section" class="nav-section">
<a href="#">
<img src="favicon.jpg" width="50px" height="auto">
</a>
</div>
<div id="nav-link-section" class="nav-section">
<a href="#">ABOUT</a>
<a href="#">TESTING</a>
</div>
<div id="nav-social-section" class="nav-section">
<a href="#">
<i class="fa-brands fa-twitter"></i>
</a>
<a href="#">
<i class="fa-brands fa-youtube"></i>
</a>
<a href="#">
<i class="fa-brands fa-google-plus"></i>
</a>
</div>
<div id="nav-contact-section" class="nav-section">
<a href="#">
CONTACT
</a>
</div>
</nav>
<main>
<article>
<div class="article-image-section article-section">
<img class="i-img" src="add-image-in-flutter-hero.webp">
</div>
<div class="article-description-section article-section">
<p>
Hello!
</p>
</div>
<div class="article-title-section article-section">
</div>
<div class="article-nav-section article-section">
<div class="nav-left">
<a href="#">
<i class="fa-solid fa-chevron-left"></i>
</a>
</div>
<div class="nav-right">
<a href="#">
<i class="fa-solid fa-chevron-right"></i>
</a>
</div>
</div>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
</main>
</body>
</html>
body {
background-color: #212121;
display: flex;
flex-direction: column;
height: 100vh;
margin: 0px;
overflow: hidden;
font-family: "Rubik", sans-serif;
font-weight: 400;
color: white;
font-size: 25px;
}
h1, h2, h3, a, p, span {
font-family: "Rubik", sans-serif;
font-weight: 400;
color: white;
text-decoration: none;
}
nav {
display: flex;
width: 100%;
border-bottom: 1px solid #fff;
}
.nav-section {
padding: 3rem 1rem;
display: flex;
gap: 1rem;
border-left: 1px solid #fff;
align-items: center;
box-sizing: border-box;
justify-content: center;
}
#nav-logo-section, #nav-link-section {
flex-basis: calc(100% / 3);
text-align: center;
}
#nav-link-section {
gap: 10rem;
}
#nav-social-section, #nav-contact-section {
flex-grow: 1;
}
#nav-logo-section {
justify-content: flex-start;
border-left: 0px;
}
#nav-social-section {
font-size: 30px;
}
main {
flex-grow: 1;
}
.article-section {
height: 100%;
border-bottom: 1px solid #fff;
}
.article-nav-section, .article-description-section {
border-left: 1px solid #fff;
}
.article-nav-section {
display: flex;
}
.nav-left, .nav-right {
flex-grow: 1;
text-align: center;
padding-top: 14%;
font-size: 40px;
}
.nav-right {
border-left: 1px solid #fff;
}
.article-description-section, .article-title-section {
padding-left: 3%;
padding-right: 3%;
}
article {
display: grid;
height: 100%;
grid-template-columns: 2fr 1fr;
grid-template-rows: 2fr 1fr;
overflow: hidden;
}
#article-image-section {
height: 100%;
width: 100%;
overflow: hidden;
}
.i-img {
width: 100%;
height: 100%;
object-fit: cover;
}