Desain Web Responsif - Gambar
Ubah ukuran jendela browser untuk melihat bagaimana skala gambar agar sesuai dengan halaman.
Menggunakan Properti lebar
Jika widthproperti disetel ke persentase dan heightproperti disetel ke "otomatis", gambar akan responsif dan diperbesar dan diperkecil:
Contoh
img {
width: 100%;
height: auto;
}
Perhatikan bahwa pada contoh di atas, gambar dapat ditingkatkan menjadi lebih besar dari ukuran aslinya. Solusi yang lebih baik, dalam banyak kasus, adalah menggunakan
max-widthproperti sebagai gantinya.
Menggunakan Properti max-width
Jika max-widthproperti disetel ke 100%, gambar akan diperkecil jika perlu, tetapi jangan pernah memperbesar lebih besar dari ukuran aslinya:
Contoh
img {
max-width: 100%;
height: auto;
}
Tambahkan Gambar ke Halaman Web Contoh
Contoh
img {
width: 100%;
height: auto;
}
Gambar Latar Belakang
Gambar latar belakang juga dapat merespons pengubahan ukuran dan penskalaan.
Di sini kami akan menunjukkan tiga metode berbeda:
1. Jika background-sizeproperti disetel ke "contain", gambar latar belakang akan diskalakan, dan coba sesuaikan dengan area konten. Namun, gambar akan mempertahankan rasio aspeknya (hubungan proporsional antara lebar dan tinggi gambar):
Berikut adalah kode CSSnya:
Contoh
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
2. Jika background-sizeproperti diatur ke "100% 100%", gambar latar belakang akan membentang untuk menutupi seluruh area konten:
Berikut adalah kode CSSnya:
Contoh
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
3. Jika background-sizeproperti diatur ke "cover", gambar latar belakang akan diskalakan untuk menutupi seluruh area konten. Perhatikan bahwa nilai "cover" mempertahankan rasio aspek, dan beberapa bagian dari gambar latar belakang mungkin terpotong:
Berikut adalah kode CSSnya:
Contoh
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
Gambar Berbeda untuk Perangkat Berbeda
Gambar besar bisa sempurna di layar komputer besar, tetapi tidak berguna di perangkat kecil. Mengapa memuat gambar besar ketika Anda harus memperkecilnya? Untuk mengurangi beban, atau untuk alasan lain, Anda dapat menggunakan kueri media untuk menampilkan gambar yang berbeda pada perangkat yang berbeda.
Berikut adalah satu gambar besar dan satu gambar kecil 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');
}
}
Anda dapat menggunakan kueri media min-device-width, sebagai ganti min-width, yang memeriksa lebar perangkat, bukan lebar browser. Maka gambar tidak akan berubah saat 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');
}
}
Elemen HTML <gambar>
Elemen HTML <picture>memberi pengembang web lebih banyak fleksibilitas dalam menentukan sumber daya gambar.
The most common use of the <picture>
element will be for images used in responsive designs. Instead of having one
image that is scaled up or down based on the viewport width, multiple images can
be designed to more nicely fill the browser viewport.
The <picture> element works similar to the <video> and
<audio> elements. You set up different sources, and the first source that fits the
preferences is the one being used:
Example
<picture>
<source srcset="img_smallflower.jpg" media="(max-width:
400px)">
<source srcset="img_flowers.jpg">
<img
src="img_flowers.jpg" alt="Flowers">
</picture>
The srcset attribute is required, and defines the source of the image.
The media attribute is optional, and accepts the media queries you find in
CSS @media rule.
You should also define an <img> element for browsers that do not support the
<picture> element.