Latihan: Menetapkan Ukuran pada Gambar

Belajar Dasar Pemrograman Web

Tools

Sebagai latihan awal, kita akan mengatur dimensi terlebih dahulu dari elemen gambar. Biar kami tebak, latihan ini terdengar mudah, bukan? Jika materi sebelumnya dipahami dengan baik, Anda pasti tahu hal yang perlu dilakukan di latihan ini. So, langsung saja berlatih!

Tujuan

Pada latihan sebelumnya, kita sudah menerapkan properti-properti CSS yang memanipulasi teks pada HTML. Nah, kita akan lanjut menerapkan beberapa properti lain yang dapat mengatur box model pada elemen HTML.

Pada latihan ini, kita akan mengatur tampilan gambar-gambar. Mereka berada pada seluruh elemen <article> (sejarah, geografi, dan wisata) serta elemen gambar dalam elemen <aside> (Logo Bandung).

Berikut adalah hasil akhir dari latihan ini.

dos:f34d44eb92ec73d3b4071b1149b75d6320230621231839.jpeg

dos:41d8fb5dd2fd155c8e325e3adfa70c9420230621231830.jpeg

Alur Latihan

Berikut adalah alur latihan kali ini.

Membuka hasil latihan terakhir dengan VSCode.
Menetapkan dimensi gambar-gambar artikel dan logo Kota Bandung.
Memanfaatkan properti object-fit dan object-position pada elemen <img>.
Menjalankan dokumen HTML pada browser.

Latihan Menetapkan Ukuran pada Gambar

Latihan ini terdiri dari beberapa topik yang saling terhubung. Untuk itu, berikut adalah daftar langkah latihan yang perlu diikuti dan disimak agar latihan berjalan dengan baik.

Silakan buka proyek Halaman Profil terakhir dengan VSCode. Jika belum memilikinya, silakan Anda unduh dan buka proyek tersebut pada GitHub repository ini.
Kita akan melakukan styling pada elemen gambar yang kita miliki dengan mengubah ukuran dimensinya. Pada berkas style.css, buatlah CSS rule baru untuk selector .featured-images dengan properti dan nilai sebagai berikut.
```
/* Kode lainnya disembunyikan... */
 
nav a:hover {
  font-weight: bold;
}
 
.profile header {
  text-align: center;
}
 
.featured-image {
  width: 100%;
  max-height: 300px;
}
```

Apakah Anda bingung dengan selector di atas? Jika ya, hal tersebut sangat wajar. Hal ini karena memang kita belum memiliki elemen dengan class bernilai featured-image. Selector tersebut perlu kita terapkan pada seluruh elemen gambar, kecuali logo Kota Bandung dalam elemen <aside>. Untuk menerapkannya, silakan tambahkan atribut class dengan nilai featured-image.

<!DOCTYPE html>
<html>
  <head>
    <!-- Kode lainnya disembunyikan... -->
  </head>
  <body>
    <header>
      <!-- Kode lainnya disembunyikan... -->
    </header>
    <main>
      <!-- Konten artikel -->
      <div id="content">
        <article id="sejarah">
          <h2>Sejarah</h2>
          <img src="assets/image/history.jpg" alt="sejarah" class="featured-image" />
          <!-- Kode lainnya disembunyikan... -->
        </article>
 
        <article id="geografis">
          <h2>Geografis</h2>
          <img src="assets/image/geografis.jpg" alt="geografis" class="featured-image" />
          <!-- Kode lainnya disembunyikan... -->
        </article>
 
        <article id="wisata">
          <h2>Wisata</h2>
          <!-- Kode lainnya disembunyikan... -->
          <section>
            <h3>Farm House Lembang</h3>
            <img src="assets/image/farm-house.jpg" alt="farm house" class="featured-image" />
            <!-- Kode lainnya disembunyikan... -->
          </section>
          <section>
            <h3>Observatorium Bosscha</h3>
            <img src="assets/image/bosscha.jpg" alt="bosscha" class="featured-image" />
            <!-- Kode lainnya disembunyikan... -->
          </section>
        </article>
      </div>
 
      <!-- Konten samping -->
      <aside>
        <!-- Kode lainnya disembunyikan... -->
      </aside>
    </main>
    <footer>
      <p>Belajar Dasar Pemrograman Web &#169; 2019, Dicoding Academy</p>
    </footer>
  </body>
</html>

Setelah menerapkannya, tampilan gambar akan menjadi seperti berikut.
Wah, apa yang telah terjadi? Tiba-tiba gambar ditampilkan secara tidak proporsional. ia ditampilkan memenuhi lebar dari viewport (jendela browser). Namun, karena kita menetapkan properti max-height juga, gambar tidak ditampilkan dengan ukuran yang tidak imbang. Solusinya, kita tambahkan properti object-fit: cover dan object-position: center pada selector .featured-image.
```
/* Kode lainnya disembunyikan... */
nav a:hover {
  font-weight: bold;
}
.profile header {
  text-align: center;
}
.featured-image {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  object-position: center;
}
```
Kedua properti yang telah kita terapkan di atas membuat gambar yang ditampilkan dapat mempertahankan kualitas rasio aslinya meskipun ukuran lebar dan panjang dari elemen gambar tidak imbang. Namun, untuk menghasilkan perbaikan gambar ini, ada area gambar yang terpotong atau tidak ditampilkan (crop).

Jika di antara Anda ada yang berpikir, “Jika gambar tersebut di-crop, apakah kita bisa memilih letak potongan yang ditampilkan?”. Jawabannya bisa. Kita bisa memanfaatkan object-position untuk melakukannya.
Selanjutnya, kita atur juga ukuran logo Kota Bandung pada elemen <aside>. Agar logo tampak tidak terlalu besar, kita atur properti width sebesar 200px. Silakan tambahkan kode bercetak tebal berikut pada berkas style.css untuk membuat CSS rules baru dengan selector .profile img dan menulis properti width beserta nilainya.
```
/* Kode lainnya disembunyikan... */
 
.profile header {
  text-align: center;
}
 
.featured-image {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  object-position: center;
}
 
.profile img {
  width: 200px;
}
```
Hasil akhir perubahan ini, logo akan tampak lebih kecil seperti berikut.

Itulah latihan yang telah kita lakukan pada materi ini. Seperti biasanya, kami menyediakan beberapa referensi materi yang dapat Anda simak untuk menambah pengetahuan.