我目前正在学习Freecodecamp课程，但我在其中一个项目上遇到了一些困难。这是我的项目的当前状态：https://codepen.io/otapadar/full/JjRaoex(我正在尝试复制此网站：https://codepen.io/freeCodeCamp/full/zNBOYG)。第二部分(我的项目(在网格中有图像。我试图调整图像的大小，使每个图像覆盖父元素的80-90%，就像我试图复制的网站一样。
当你查看我的网站时，你会发现图像没有调整大小。我已经尝试通过在我的图像上使用以下属性来修复这个问题：对象匹配：封面。遗憾的是，这并不能解决问题。
如有任何帮助，我们将不胜感激。提前感谢！
HTML:
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<nav id="navbar">
<ul>
<li><a class="nav-link" href="#welcome-section">About</a></li>
<li><a class="nav-link" href="#projects">Work</a></li>
<li><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</nav>
<main>
<section id="welcome-section">
<h1>Hey, I am Brad</h1>
<p>Web Developer</p>
</section>
<section id="projects">
<h2 class="projects-header">My Projects</h2>
<container class="project-grid">
<a class="project-tile" target="_blank">
<img class="project-image" src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg">
<p class="project-title">Tribute Page</p>
</a>
<a class="project-tile" target="_blank">
<img class="project-image" src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/random-quote-machine.png">
<p class="project-title">Random Quote Machine</p>
</a>
<a class="project-tile" target="_blank">
<img class="project-image" src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/calc.png">
<p class="project-title">JavaScript Calculator</p>
</a>
<a class="project-tile" target="_blank">
<img class="project-image" src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/map.jpg">
<p class="project-title">Map Data</p>
</a>
<a class="project-tile" target="_blank">
<img class="project-image" src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/wiki.png">
<p class="project-title">Wikipedia Viewer</p>
</a>
<a class="project-tile" target="_blank">
<img class="project-image" src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tic-tac-toe.png">
<p class="project-title">Tic Tac Toe</p>
</a>
</container>
<a class="button" href="https://codepen.io/otapadar" target="_blank">Show All</a>
</section>
<section id="contact">
<h1>Let's Work Together</h1>
<p>How do you take your coffee?</p>
<container class="social-icons">
<a class="profile-link" target="_blank"></a>
<a class="profile-link" target="_blank"></a>
<a class="profile-link" target="_blank"></a>
<a class="profile-link" target="_blank"></a>
<a class="profile-link" target="_blank"></a>
</container>
</section>
</main>
CSS
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
font-family: 'Raleway';
scroll-behavior: smooth;
}
#navbar {
position: fixed;
display: flex;
justify-content: flex-end;
top: 0;
left: 0;
right: 0;
width: 100%;
background-color: #be3144;
}
#navbar ul {
display: flex;
list-style: none;
margin-right: 2rem;
}
a {
text-decoration: none;
color: #f0f0f0;
}
.nav-link {
display: block;
padding: 1.5rem;
font-size: 1.3rem;
font-weight: bold;
}
#welcome-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000;
background-image: linear-gradient(62deg, #3a3d40 0%, #181719 100%)
}
#welcome-section > h1 {
font-size: 4rem;
color: #f0f0f0;
font-weight: 700;
margin-bottom: 1.5rem;
}
#welcome-section > p {
color: #be3144;
font-size: 2rem;
}
#projects {
background-color: #45567d;
padding: 6rem 2rem;
text-align: center;
}
.projects-header {
font-size: 3rem;
color: #f0f0f0;
margin: 0 auto 2rem auto;
}
.project-grid {
display: grid;
width: 100%;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
margin-bottom: 4rem;
}
.project-tile {
background-color: #303841;
}
.project-image {
height: calc(100%-6rem);
width: 100%;
object-fit: cover;
}
.project-title {
font-size: 1.5rem;
padding: 1.5rem 0.5rem;
font-weight: bold;
}
.button {
padding: 0.5rem 1rem;
font-size: 1.5rem;
background-color: #303841;
}
css中的问题是这行height: calc(100%-6rem);只是在运算符周围添加空格，使其成为height: calc(100% - 6rem);
你应该在像这样的迷你之后和之前留出空白
height:calc(100% - 6rem)
添加最大宽度：100%；在css中投影图像类，还可以在img元素中设置自定义宽度或高度
project-image{
height: 300px;
width: 600px;
max-width:100%;
object-fit: cover;
}