Web Desain Responsif - Foto
Menggunakan atribut width
Jika atribut lebar diatur ke 100%, gambar akan terwujud sesuai dengan rentang atas dan bawah dari fungsi responsif:
Perhatikan bahwa dalam contoh di atas, gambar akan lebih besar dari gambar aslinya. Kita dapat menggunakan max-width atribut solusi yang baik untuk masalah ini.
Menggunakan max-width properti
Jika properti max-lebar diatur ke 100%, gambar tidak akan lebih besar dari ukuran aslinya:
Tambahkan halaman gambar
gambar latar belakang
Background image dapat merespon untuk mengubah ukuran atau zoom.
Berikut ini adalah tiga metode yang berbeda:
1. Jika properti background-size diatur ke "berisi", gambar latar belakang akan perbandingan luas konten adaptif. Foto mempertahankan proporsi tidak berubah:
Ini adalah kode CSS:
contoh
width: 100%;
height: 400px;
background-image: url ( 'img_flowers.jpg ');
background-repeat: no-repeat;
background-size: berisi;
border: 1px solid red;
}
Coba »
2. Jika properti background-size diatur ke "100% 100%", gambar latar belakang akan diperluas untuk mencakup seluruh wilayah:
contoh
Ini adalah kode CSS:
width: 100%;
height: 400px;
background-image: url ( 'img_flowers.jpg ');
background-size: 100% 100% ;
border: 1px solid red;
}
Coba »
3. Jika properti background-size diatur untuk "menutupi", gambar latar belakang diperluas menjadi cukup besar untuk benar-benar menutupi latar belakang sehingga area gambar latar belakang. Perhatikan bahwa properti tetap proporsi gambar sehingga beberapa bagian dari gambar latar belakang tidak dapat ditampilkan di area posisi latar belakang.
Ini adalah kode CSS:
contoh
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
Coba »
perangkat yang berbeda menunjukkan gambaran yang berbeda
gambar besar dapat ditampilkan di layar lebar, tetapi mereka tidak menunjukkan baik pada layar kecil. Kita tidak perlu untuk memuat layar kecil dalam gambaran besar, sehingga mempengaruhi kecepatan loading. Jadi kita bisa menggunakan query media, tergantung pada perangkat untuk menampilkan gambar yang berbeda.
Berikut gambaran besar dan gambar kecil akan ditampilkan pada perangkat yang berbeda:
contoh
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');
}
}
Coba »
Anda dapat menggunakan kueri media min-perangkat-lebar pengganti min-width atribut, itu akan mendeteksi lebar perangkat bukannya lebar browser. Atur ulang ukuran browser, ukuran gambar tidak berubah.
contoh
body {
background-image: url ( 'img_smallflower.jpg ');
}
/ * Perangkat yang lebih besar dari 400px (juga sama dengan): * /
@media hanya layar dan (min-perangkat -width: 400px) {
body {
background-image: url ( 'img_flowers.jpg ');
}
}
Coba »
HTML5 <gambar> elemen
HTML5 <picture> elemen dapat mengatur beberapa gambar.
Dukungan Browser
| elemen | |||||
|---|---|---|---|---|---|
| <Picture> | Tidak mendukung | 38.0 | 38.0 | Tidak mendukung | 25,0 |
<picture> elemen yang mirip dengan <video> dan <audio> elemen. perangkat yang berbeda dapat sumber daya, sumber daya set pertama penggunaan disukai:
contoh
<Sumber srcset = "img_smallflower.jpg" Media = "(max-width: 400px)">
<Sumber srcset = "img_flowers.jpg">
<Img src = "img_flowers.jpg" alt = "Bunga">
</ Picture>
Coba »
srcset properti harus definisi sumber daya gambar.
media atribut opsional, media query CSS @media memerintah See detail.
Jangan mendukung <picture> elemen peramban Anda dapat menentukan <img> elemen sebagai gantinya.