Bagaimana membuat: gambar responsif

Belajar bagaimana menggunakan CSS untuk membuat gambar responsif.

Gambar responsif akan otomatis diatur untuk menyesuaikan ukuran layar.

atur ukuran jendela browser untuk melihat efek responsif:

Lights

lihat efek

Bagaimana membuat gambar responsif

Langkah pertama - Tambahkan HTML:

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

Langkah kedua - Tambahkan CSS:

Jika Anda ingin kemampuan responsif gambar dapat diukur dan diperbesar sekaligus, silakan atur CSS width aturan untuk 100%,height diatur auto:

contoh

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

coba sendiri

Jika Anda ingin gambar dikecilkan jika diperlukan, tetapi tidak pernah diperbesar melebihi ukuran aslinya, gunakan max-width: 100%:

contoh

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

coba sendiri

Jika Anda ingin membatasi gambar responsif untuk ukuran maksimal, gunakan max-width aturan serta nilai piksel yang Anda pilih:

contoh

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

coba sendiri

halaman relevan

Panduan:Gambar CSS

Panduan:Tata Letak Situs Berespon CSS