Untuk membuat gambar responsif, Anda dapat menggunakan CSS dan teknik responisf gambar, seperti menggunakan properti max-width: 100% dan height: auto. Berikut adalah contoh penggunaannya:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
<style>
/* CSS untuk gambar responsif */
.responsive-image {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img class="responsive-image" src="gambar.jpg" alt="Deskripsi Gambar">
</body>
</html>Dalam contoh di atas, kita menggunakan CSS untuk membuat gambar menjadi responsif dengan menggunakan class “responsive-image” pada elemen <img>.
.responsive-image: Digunakan untuk mengatur properti CSS pada gambar untuk membuatnya responsif. Dengan menggunakanmax-width: 100%, gambar akan menyesuaikan lebar maksimum sesuai dengan lebar kotak konten yang mengandung gambar. Denganheight: auto, gambar akan menjaga perbandingan aspek dan secara otomatis menyesuaikan tingginya sesuai dengan lebar yang diatur.
Dengan menggunakan properti CSS tersebut, gambar akan menyesuaikan ukurannya secara responsif tergantung pada lebar kotak konten tempat gambar tersebut ditempatkan. Hal ini memastikan bahwa gambar akan tetap terlihat baik pada perangkat dengan berbagai lebar layar, termasuk saat layar berubah ukuran saat halaman web ditampilkan pada perangkat yang berbeda.
