Menggunakan Properti lebar
Jika width properti diatur ke 100%, gambar akan responsif dan skala atas dan ke bawah:
Perhatikan bahwa dalam contoh di atas, gambar dapat ditingkatkan menjadi lebih besar dari ukuran aslinya. Sebuah solusi yang lebih baik, dalam banyak kasus, akan menggunakan max-width properti sebagai gantinya.
Menggunakan max-width Properti
Jika max-width properti diatur ke 100%, gambar akan menurunkan jika itu harus, tetapi tidak pernah skala hingga lebih besar dari ukuran aslinya:
Tambahkan Gambar ke The Contoh Halaman Web
Gambar latar belakang
gambar latar belakang juga dapat menanggapi mengubah ukuran dan skala.
Di sini kita akan menunjukkan tiga metode yang berbeda:
1. Jika background-size properti diatur ke "berisi", gambar latar belakang akan skala, dan mencoba untuk menyesuaikan area konten. Namun, gambar akan tetap rasio aspek (hubungan proporsional antara lebar gambar dan tinggi):
Berikut 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;
} Cobalah sendiri " 2. Jika background-size properti diatur ke "100% 100%", gambar latar belakang akan meregangkan untuk menutupi area konten seluruh:
Berikut adalah kode CSS:
Contoh
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
} Cobalah sendiri " 3. Jika background-size properti diatur ke "cover" , gambar latar belakang akan skala untuk menutupi area konten seluruh. Perhatikan bahwa "cover" nilai menjaga aspek rasio, dan beberapa bagian dari gambar latar belakang mungkin terpotong:
Berikut adalah kode CSS:
Contoh
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
} Cobalah sendiri " Gambar yang berbeda untuk berbeda Devices
Sebuah gambar yang besar dapat menjadi sempurna di layar komputer besar, tapi tidak berguna pada perangkat kecil. Mengapa memuat gambar besar ketika Anda harus skala itu turun sih? Untuk mengurangi beban, atau untuk alasan lain, Anda dapat menggunakan query media untuk menampilkan gambar yang berbeda pada perangkat yang berbeda.
Berikut adalah salah satu gambar besar dan satu kecil gambar yang akan ditampilkan pada perangkat yang berbeda:
Contoh
/* For width smaller than 400px: */
body {
background-image:
url('img_smallflower.jpg');
}
/*
For width 400px and larger: */
@media only screen and (min-width: 400px)
{
body {
background-image: url('img_flowers.jpg');
}
} Cobalah sendiri " Anda dapat menggunakan query media yang min-device-width , bukan min-width , yang memeriksa lebar perangkat, bukannya lebar browser. Maka gambar tidak akan berubah ketika Anda mengubah ukuran jendela browser:
Contoh
/* For devices smaller than 400px: */
body {
background-image:
url('img_smallflower.jpg');
}
/*
For devices 400px and larger: */
@media only screen and (min-device-width: 400px)
{
body {
background-image: url('img_flowers.jpg');
}
} Cobalah sendiri " HTML5 <picture> Elemen
HTML5 memperkenalkan <picture> elemen, yang memungkinkan Anda menentukan lebih dari satu gambar.
Dukungan Browser
| Elemen | |||||
|---|---|---|---|---|---|
| <picture> | Tidak didukung | 38.0 | 38.0 | Tidak didukung | 25,0 |
The <picture> elemen bekerja sama dengan <video> dan <audio> elemen. Anda menyiapkan sumber yang berbeda, dan sumber pertama yang sesuai dengan preferensi adalah salah satu yang digunakan:
Contoh
<picture>
<source srcset="img_smallflower.jpg" media="(max-width:
400px)">
<source srcset="img_flowers.jpg">
<img
src="img_flowers.jpg" alt="Flowers">
</picture> Cobalah sendiri " The srcset atribut diperlukan, dan mendefinisikan sumber gambar.
The media atribut opsional, dan menerima permintaan media yang Anda temukan di aturan CSS @media .
Anda juga harus menentukan <img> elemen untuk browser yang tidak mendukung <picture> elemen.