如何使用 CSS 调整图像大小以适应其容器？

Question

我目前正在学习 Freecodecamp 课程，但在其中一个项目上有点卡住了。这是我项目的当前状态：https://codepen.io/otapadar/full/JjRaoex（我正在尝试复制此网站：https://codepen.io/freeCodeCamp/full/zNBOYG）。第二部分（我的项目）在网格中包含图像。我正在尝试调整图像的大小，以便每个图像覆盖大约 80-90% 的父元素，就像我要复制的网站一样。

当您查看我的网站时，您会发现图像没有调整大小。我尝试通过在我的图像上使用以下属性来解决此问题：object-fit:cover。遗憾的是，这并不能解决问题。

任何有关解决此问题的帮助将不胜感激。提前致谢！

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

您的 css 中的问题是这一行 height: calc(100%-6rem); 只需在运算符周围添加空格即可 height: calc(100% - 6rem);

Answer 2

你应该在这样的迷你之后和之前留出空白

height:calc(100% - 6rem)

Answer 3

添加最大宽度：100%；到css中的project-image类，你也可以在img元素中设置自定义宽度或高度

    project-image{
 height: 300px;
  width: 600px;
  max-width:100%;
  object-fit: cover;
}