How To

Cara Membuat Gambar Responsif

Pelajari cara membuat gambar responsif dengan CSS.

Gambar responsif secara otomatis akan menyesuaikan dengan ukuran layar.

Ubah ukuran jendela browser untuk melihat efek responsif:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.responsive {
  width: 100%;
  height: auto;
}
</style>
</head>
<body>

<h2>Responsive Images</h2>

<p>Jika  ingin gambar ditingkatkan dan diturunkan secara responsif, setel properti lebar CSS ke 100% dan tinggi ke otomatis. </p>
<p> Ubah ukuran jendela peramban untuk melihat efeknya.</p>

<img src="https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg" alt="Nature" class="responsive" width="600" height="400">

</body>
</html>

Cara Membuat Gambar Responsif

Langkah 1) Tambahkan HTML:
Contoh

<img src="https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg" alt="Nature" class="responsive">

Langkah 2) Tambahkan CSS:
Jika ingin gambar ditingkatkan dan diturunkan secara responsif, setel properti width CSS ke 100% dan height ke otomatis:

Contoh

.responsive {
  width: 100%;
  height: auto;
}

Jika ingin gambar diperkecil jika harus, tetapi tidak pernah diperbesar menjadi lebih besar dari ukuran aslinya, gunakan max-width: 100%:

Contoh

.responsive {
  max-width: 100%;
  height: auto;
}

Jika ingin membatasi gambar responsif ke ukuran maksimum, gunakan properti max-width, dengan nilai piksel seusi dengan selera:

Contoh

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}

Hanifah Nurbaeti

Share
Tags: CSSHow Tohtml