Menu
CoddyTech
START LEARNING

Gambar Fleksibel

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 66 dari 76.

Dalam desain web responsif, gambar fleksibel secara otomatis menyesuaikan diri agar sesuai dengan berbagai ukuran layar, sehingga tampilannya tetap bagus di semua perangkat. Tanpa fleksibilitas, gambar bisa terlalu besar di layar kecil atau merusak tata letak.

Cara Membuat Gambar Fleksibel:

1. Gunakan CSS max-width
Mengatur max-width: 100% memastikan gambar tidak pernah melebihi lebar wadahnya.

img {
  max-width: 100%;
  height: auto; /* Mempertahankan rasio aspek */
}

2.Gunakan Unit Viewport
Kamu dapat mengatur ukuran gambar menggunakan vw (lebar viewport) agar ukurannya menyesuaikan dengan ukuran layar.

img {
  width: 50vw; /* Gambar menempati 50% lebar viewport */
}
challenge icon

Tantangan

Mudah

Kamu diberi dokumen HTML dengan sebuah gambar. Tugasmu adalah membuat gambar tersebut responsif agar menyesuaikan dengan berbagai ukuran layar.

  1. Tulis aturan CSS yang menargetkan semua elemen dengan class img-max. Atur max-width menjadi 100% dan height menjadi auto.
  2. Tulis aturan CSS yang menargetkan semua elemen dengan class img-vw. Atur width menjadi 50vw dan height menjadi auto.

Coba sendiri

<html>
<head>
    <title>Flexible Images</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body style="background-color:lightblue">
     <div class="container">
        <h2>Image with max-width: 100%</h2>
        <img class="img-max" src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Adelie_penguins_in_the_South_Shetland_Islands.jpg" alt="Max-Width Image">
    </div>

    <div class="container">
        <h2>Image with width: 50vw</h2>
        <img class="img-vw" src="https://upload.wikimedia.org/wikipedia/commons/4/40/Adelie_Penguins_on_iceberg.jpg">
    </div>
</body>
</html>
quiz iconUji dirimu

Pelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.

Semua pelajaran di Menata dengan CSS

1Pengantar

Apa itu CSS?Sintaks CSSKomentar CSSTag HeadTag Title

4Dasar-Dasar Teks

Warna TeksJenis FontUkuran FontKetebalan FontPerataan TeksDekorasi TeksTantangan Rangkuman #1Tantangan Rangkuman #2

7Model Kotak Bagian 1

Apa Itu Model Kotak?PaddingMarginBorderLebar dan TinggiTantangan Ulasan

10Formulir Login

Bagian isiWadah formulirPelajaran proyekinputPelajaran proyekTombolPelajaran proyek

13Halaman Web Tonga

Menu NavigasiHeader SambutanPelajaran proyekBagian TentangPelajaran proyekBagian KontakPelajaran proyekTag ViewportPelajaran proyekMedia QueryPelajaran proyek

2Menambahkan CSS

CSS InlineCSS InternalCSS EksternalTantangan Penataan Gaya Dasar

5Warna dan Latar Belakang

Warna Latar BelakangWarna HEXWarna RGBTransparansi dengan RGBATantangan Rangkuman #1

8Model Kotak Bagian 2

Ukuran KotakRadius SudutLuapanBayangan KotakTantangan Mengulas

11Teknik Tata Letak

Elemen block vs inlineDasar PenempatanPenempatan RelatifPenempatan AbsolutPenempatan TetapDasar Z-IndexTantangan Kilas Balik

14Tantangan Akhir

Susun ItemDaftar FilmKartu Undangan PernikahanNotifikasi Mengambang

3Selektor Dasar

Pengantar SelektorSelektor TipeSelektor classSelektor IDSelektor GrupSelektor UniversalTantangan Seleksi

6Menu Kafe

Dasar TipografiPenataan TeksPelajaran proyekWarna dan Latar BelakangPelajaran proyek

9Flexbox

Apa itu Flexbox?Arah FlexJustify ContentAlign ItemsTitik Tengah yang SempurnaTantangan Flexbox

12Dasar-Dasar Desain Responsif

Apa Itu Desain Responsif?Tag Meta ViewportTata Letak FluidaUnit ViewportDasar-Dasar Media QueriesGambar Fleksibel

Latihan sendiri: Playground Web