DATABASE.co.id

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:

Contoh Software ERP custom


Artikel Terkait

  1. Kelebihan Software ERP Berbasis Web Dibandingkan Berbasis Desktop
  2. Kelebihan Software ERP Custom Dibanding Software ERP yang Sudah Jadi
  3. jasa pembuatan aplikasi gudang

Product Terkait

  1. Kasir Salon dan SPA Kabupaten penajam paser utara
  2. Software Pergudangan Kabupaten tebo
  3. Kasir Cafe dan RestoranKota serang
  4. ERP Untuk Pabrik Kabupaten pesisir barat
  5. Kasir Klinik KecantikanKabupaten aceh selatan
  6. Database Solutions Kabupaten solok selatan