Saat ini saya sedang mengikuti kursus Freecodecamp, tetapi saya sedikit terjebak di salah satu proyek. Ini adalah status proyek saya saat ini: https://codepen.io/otapadar/full/JjRaoex(Saya mencoba menyalin situs web ini: https://codepen.io/freeCodeCamp/full/zNBOYG). Bagian kedua (Proyek Saya) memiliki gambar dalam kotak. Saya mencoba mengubah ukuran gambar, sehingga setiap gambar mencakup sekitar 80-90% elemen induk, sama seperti situs yang saya coba salin.

Ketika Anda melihat situs web saya, Anda melihat bahwa ukuran gambar tidak berubah. Saya telah mencoba memperbaikinya dengan menggunakan properti berikut pada gambar saya: object-fit: cover. Ini tidak memperbaikinya, sayangnya.

Bantuan apa pun untuk memperbaiki ini akan sangat dihargai. Terima kasih sebelumnya!

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; 
}
0
user13717018 10 Januari 2021, 23:28

3 jawaban

Jawaban Terbaik

Masalah di css Anda adalah baris ini height: calc(100%-6rem); tambahkan saja spasi di sekitar operator menjadi height: calc(100% - 6rem);

2
Zac 10 Januari 2021, 20:49

Anda harus mengambil ruang putih setelah dan sebelum mini seperti itu

height:calc(100% - 6rem)
1
alaa alden 10 Januari 2021, 20:59

Tambahkan max-width:100%; untuk memproyeksikan kelas gambar di css dan Anda juga dapat mengatur lebar atau tinggi khusus di elemen img

    project-image{
 height: 300px;
  width: 600px;
  max-width:100%;
  object-fit: cover;
}
0
Albenoo 10 Januari 2021, 20:44