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;
}