Desain Web Respon - Gambar

Menggunakan properti width

Jika width properti diatur menjadi persen dan tinggi diatur menjadi "auto", gambar akan berespon untuk diperbesar atau diperkecil:

Contoh

img {
  width: 100%;
  height: auto;
}

Coba Sendiri

Perhatikan, dalam contoh di atas, gambar dapat diperbesar melebihi ukuran aslinya. Dalam sebagian besar kasus, solusi yang lebih baik adalah mengganti dengan penggunaan max-width properti.

Menggunakan properti max-width

Jika properti max-width diatur menjadi 100%, gambar akan diukur kembali sesuai kebutuhan, tetapi tidak akan diperbesar melebihi ukuran aslinya:

Contoh

img {
  max-width: 100%;
  height: auto;
}

Coba Sendiri

Menambahkan gambar ke halaman web instansinya

Contoh

img {
  width: 100%;
  height: auto;
}

Coba Sendiri

Gambar latar

Gambar latar juga dapat berespon kepada pengaturan ukuran dan skala.

Ini adalah tiga metode yang kami tampilkan:

1. Jika mengatur background-size Setelan properti menjadi "contain", maka gambar latar akan diukur kembali dan mencoba untuk cocok dengan area konten. Namun, gambar akan mempertahankan proporsi aslinya (proporsi lebar dan tinggi gambar):

Ini adalah kode CSS:

Contoh

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid red;
}

Coba Sendiri

2. Jika background-size Jika atribut diatur menjadi "100% 100%", gambar latar belakang akan dijauhkan untuk menutupi seluruh area konten:

Ini adalah kode CSS:

Contoh

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: 100% 100%;
  border: 1px solid red;
}

Coba Sendiri

3. Jika background-size Jika atribut diatur menjadi "cover", gambar latar belakang akan diskalakan untuk menutupi seluruh area konten. Perhatikan bahwa nilai "cover" mempertahankan aspek rasio dan mungkin akan memotong bagian dari gambar latar belakang:

Ini adalah kode CSS:

Contoh

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: cover;
  border: 1px solid red;
}

Coba Sendiri

Buat gambar yang berbeda untuk berbagai perangkat

Gambar besar dapat ditampilkan dengan sempurna di layar komputer besar, tetapi tidak berguna di perangkat kecil. Mengapa memuat gambar besar saat harus memperkecil gambar? Untuk mengurangi beban atau untuk alasan lain, Anda dapat menggunakan media query untuk menampilkan gambar yang berbeda di berbagai perangkat.

Ini adalah gambar besar dan kecil, yang akan ditampilkan di berbagai perangkat:

Contoh

/* Untuk lebar yang lebih kecil daripada 400 pixel: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* Untuk 400 pixel atau lebar yang lebih besar: */
@media only screen and (min-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

Coba Sendiri

Anda dapat menggunakan media query min-device-width bukan min-width cek lebar perangkat, bukannya lebar browser. Lalu, ketika Anda mengatur ukuran jendela browser, gambar tidak akan berubah:

Contoh

/* Berikan untuk perangkat yang lebih kecil daripada 400 pixel: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* Berikan 400 pixel dan lebih besar untuk perangkat: */
@media only screen and (min-device-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

Coba Sendiri

Elemen HTML5 <picture>

HTML5 memperkenalkan <picture> elemen yang memungkinkan Anda mendefinisikan banyak gambar.

Dukungan browser

38.0 13 38.0 9.1 25.0

<picture> Fungsi elemen seperti <video> dan <audio> Elemen. Kita menetapkan berbagai sumber, dan sumber pertama yang memiliki prioritas match adalah sumber yang digunakan saat ini:

Contoh

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture>

Coba Sendiri

srcset Properti ini adalah wajib, ia menentukan sumber gambar.

media Properti ini adalah opsional, ia menerima dapat didaftarkan di Aturan @media CSS ditemukan di kueri media.

Petunjuk:Anda seharusnya menambahkan untuk yang tidak mendukung <picture> Definisi Browser Elemen <img> Elemen.