Cara membuat gambar responsive dengan HTML dan CSS

Dibawah ini saya akan mengajarkan cara membuat gambar atau foto dalam html menjadi responsive dengan cara yang sederhana dan mudah dimengerti. Gambar responsive akan menyesuaikan lebar dan tingginya secara otomatis dengan ukuran layar.

Tahap Pertama Tambahkan HTML:

Contoh:

<img src="nature.jpg" alt="Nature" class="responsive">

Langkah 2. Tambahkan CSS:

Jika Anda ingin gambar mengubah skala baik menjadi lebih besar maupun lebih kecil saat responsif, atur properti lebar CSS menjadi 100% dan tinggi menjadi otomatis:

Contoh:
.responsif { width: 100%; height: auto; }

Jika Anda ingin gambar mengubah skala menjadi lebih kecil jika diperlukan, tetapi tidak pernah membesar hingga lebih besar dari ukuran aslinya, gunakan max-width: 100%:

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

Hasilnya: