Berikut ini cara menambahkan gambar desain responsif menggunakan CSS
Lihatlah situs web populer saat ini dan satu perawatan desain yang pasti Anda lihat adalah gambar latar belakang yang besar dan mencakup layar. Salah satu tantangan dengan menambahkan gambar ini berasal dari praktik terbaik bahwa situs web harus merespons berbagai ukuran layar dan perangkat - pendekatan yang dikenal sebagai desain web responsif .
Karena tata letak situs web Anda berubah dan berskala dengan ukuran layar yang berbeda, demikian pula gambar latar belakang ini harus menyesuaikan ukurannya.
Bahkan, "gambar-gambar fluida" ini adalah salah satu bagian kunci dari situs web responsif (bersama dengan kisi-kisi cairan dan pertanyaan media). Ketiga potongan tersebut telah menjadi pokok desain web responsif sejak awal, tetapi sementara itu selalu cukup mudah untuk menambahkan gambar inline yang responsif ke sebuah situs (gambar inline adalah grafis yang dikodekan sebagai bagian dari markup HTML), melakukan sama dengan gambar latar belakang (yang ditata ke dalam halaman menggunakan properti latar belakang CSS) telah lama memberikan tantangan yang signifikan bagi banyak desainer web dan pengembang ujung depan. Untungnya, penambahan properti "latar belakang-ukuran" dalam CSS telah memungkinkan hal ini.
Dalam artikel terpisah, saya membahas cara menggunakan ukuran latar belakang properti CSS3 untuk merentangkan gambar agar pas di jendela, tetapi ada cara yang lebih baik dan lebih bermanfaat untuk diterapkan pada properti ini. Untuk melakukan ini, kita akan menggunakan kombinasi properti dan nilai berikut:
background-size: cover;
Properti kata kunci sampul memberitahu browser untuk menskalakan gambar agar sesuai dengan jendela, terlepas dari seberapa besar atau kecil jendela itu. Gambar diskalakan untuk menutupi seluruh layar, tetapi proporsi dan rasio aspek aslinya tetap utuh, mencegah gambar itu sendiri terdistorsi.
Gambar ditempatkan di jendela seluas mungkin sehingga seluruh permukaan jendela tertutup. Ini berarti Anda tidak akan memiliki titik-titik kosong di halaman Anda atau distorsi apa pun pada gambar, tetapi itu juga berarti bahwa sebagian gambar dapat dipangkas tergantung pada rasio aspek layar dan gambar yang bersangkutan. Misalnya, tepi gambar (baik atas, bawah, kiri, atau kanan) dapat terpotong pada gambar, tergantung pada nilai yang Anda gunakan untuk properti latar belakang-posisi. Jika Anda mengarahkan latar belakang ke "kiri atas", kelebihan apa pun pada gambar akan keluar dari sisi bawah dan kanan. Jika Anda memusatkan gambar latar belakang, kelebihannya akan keluar dari semua sisi, tetapi karena kelebihan itu tersebar, dampaknya pada satu sisi akan kurang terlayani.
Cara Menggunakan ukuran latar belakang: penutup;
Saat membuat gambar latar belakang Anda, ada baiknya untuk membuat gambar yang cukup besar. Sementara browser dapat membuat gambar lebih kecil tanpa dampak yang nyata pada kualitas visual, ketika browser memperbesar gambar ke ukuran yang lebih besar dari dimensi aslinya, kualitas visual akan menurun, menjadi buram dan pixelated. Kelemahan untuk ini adalah bahwa halaman Anda mengambil hit kinerja ketika Anda mengirimkan gambar raksasa ke semua layar.
Saat Anda melakukan ini, pastikan Anda menyiapkan gambar tersebut dengan tepat untuk kecepatan unduhan dan pengiriman web . Pada akhirnya, Anda perlu menemukan medium bahagia antara ukuran dan kualitas gambar yang cukup besar dan ukuran file yang masuk akal untuk kecepatan unduhan.
Salah satu cara umum untuk menggunakan gambar latar skala adalah ketika Anda ingin gambar itu mengambil latar belakang penuh dari halaman, apakah halaman tersebut lebar dan dilihat di komputer desktop atau jauh lebih kecil dan sedang dikirim ke ponsel genggam perangkat.
Unggah gambar Anda ke host web Anda dan tambahkan ke CSS Anda sebagai gambar latar belakang:
background-image: url (kembang api-over-wdw.jpg);
background-repeat: no-repeat;
latar belakang-posisi: pusat pusat;
background-attachment: diperbaiki;
Tambahkan CSS awalan peramban terlebih dahulu:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
Kemudian tambahkan properti CSS:
background-size: cover;
Menggunakan Gambar Yang Berbeda Yang Menyesuaikan Berbagai Perangkat
Sementara desain responsif untuk desktop atau pengalaman laptop penting, berbagai perangkat yang dapat mengakses Web telah tumbuh secara signifikan, dan berbagai ukuran layar yang lebih besar hadir dengan itu.
Seperti yang disebutkan sebelumnya, memuat gambar latar belakang responsif yang sangat besar pada smartphone, misalnya, bukanlah desain yang efisien atau sadar bandwidth.
Pelajari bagaimana Anda dapat menggunakan kueri media untuk menyajikan gambar yang sesuai dengan perangkat tempat mereka akan ditampilkan, dan lebih meningkatkan kompatibilitas situs web Anda dengan perangkat seluler.
Artikel asli oleh Jennfier Krynin. Diedit oleh Jeremy Girard 9/12/17