html - How to resize an image to fit its container with CSS?

Question

I am currently doing the Freecodecamp course, but I got a little stuck on one of the projects. This is the current state of my project: https://codepen.io/otapadar/full/JjRaoex (I am trying to copy this website: https://codepen.io/freeCodeCamp/full/zNBOYG). The second section (My Projects) has images within a grid. I am trying to resize the images, such that each image covers about 80-90% of the parent element, just like the site I am trying to copy.

When you look at my website, you see that the images are not resizing. I have tried fixing this by using the following property on my images: object-fit: cover. This doesn't fix it, sadly.

Any help on fixing this would be greatly appreciated. Thanks in advance!

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; 
}

Answer 1

The problem in your css is this line height: calc(100%-6rem); just add spaces around the operator to be height: calc(100% - 6rem);