Bootstrap menawarkan kelas yang berbeda untuk gambar agar penampilannya lebih baik dan juga membuatnya responsif. Membuat gambar responsif berarti gambar harus diskalakan sesuai dengan elemen induknya. Artinya, ukuran gambar tidak boleh melebihi induknya dan akan membesar dan mengecil sesuai dengan perubahan ukuran induknya tanpa kehilangan aspek rasionya.
Bootstrap adalah kerangka kerja CSS sumber terbuka, sebagian besar untuk membangun situs web responsif dan aplikasi yang mengutamakan seluler. Kerangka fitur pengaturan CSS global; . g. , komidi putar, formulir, dan bilah navigasi;
Anda dapat membuat komponen dengan menambahkan kelas Bootstrap ke elemen. Kelas-kelas itu juga menata gambar dan mengoptimalkannya untuk perilaku responsif, mis. e. , menskalakan bersama wadah gambar saat jendela browser diubah ukurannya
Desain web responsif (RWD) berisi halaman web dan aplikasi yang mendeteksi ukuran dan orientasi layar pengunjung sehingga browser dapat menyesuaikan tampilan secara otomatis. Pendekatan yang mengutamakan seluler mengasumsikan bahwa tablet, aplikasi seluler khusus tugas, dan ponsel cerdas adalah alat utama untuk menyelesaikan pekerjaan, menangani persyaratan mereka dalam desain
Apakah Gambar Responsif itu?
Sebagai komponen penting tata letak yang fleksibel, gambar responsif menyesuaikan ukuran, orientasi, dan resolusi gambar berdasarkan perangkat pengguna akhir, memungkinkan halaman web mendeteksi dan merespons kondisi layar pengunjung
Biasanya, gambar responsif menawarkan beberapa opsi untuk sebuah gambar. Bergantung pada ukuran layar, situs web mengirimkan versi gambar tajam visual yang lebih kecil atau lebih besar sehingga browser kemudian dapat mengunduh versi dengan ukuran yang sesuai. Proses gambar responsif terjadi sebelum gambar mencapai browser
Untuk detail selengkapnya, lihat Praktik Terbaik untuk Desain Web Responsif.
Artikel ini membahas topik-topik berikut
Memahami Prasyarat untuk Gambar Responsif Bootstrap
Sebelum menyiapkan gambar responsif untuk halaman Anda, siapkan bundel Bootstrap CSS dan JavaScript dengan mengunduh file terkompilasi terbaru mereka
Sebagai alternatif, tambahkan skrip Bootstrap yang diperlukan ke halaman Anda dengan jaringan pengiriman konten (CDN) JSDeliver gratis. Tidak diperlukan unduhan. Ikuti langkah-langkah di bawah ini
Gambar Bootstrap
Sudut Bulat
Lingkaran
Gambar kecil
Gambar datang dalam semua ukuran. Begitu juga layar. Gambar responsif secara otomatis menyesuaikan agar sesuai dengan ukuran layar
Buat gambar responsif dengan menambahkan kelas .img-responsive ke tag
Galeri Gambar
Anda juga dapat menggunakan sistem grid Bootstrap bersamaan dengan kelas .img-rounded0 untuk membuat galeri gambar
Catatan. Anda akan mempelajari lebih lanjut tentang Sistem Grid nanti dalam tutorial ini (cara membuat tata letak dengan jumlah kolom yang berbeda)
Contoh
Lorem ipsum
Lorem ipsum
Lorem ipsum
Cobalah sendiri "
Sematan Responsif
Juga biarkan video atau tayangan slide diskalakan dengan benar di perangkat apa pun
Kelas dapat diterapkan langsung ke,,, dan elemen
Contoh berikut membuat video responsif dengan menambahkan kelas .img-rounded1 ke tag .img-rounded2 (video kemudian akan diskalakan dengan baik ke elemen induk). Yang berisi .img-rounded_2 menentukan rasio aspek video
Contoh
Cobalah sendiri "
Apa itu rasio aspek?
Rasio aspek gambar menggambarkan hubungan proporsional antara lebar dan tingginya. Dua rasio tinggi lebar video yang umum adalah 4. 3 (format video universal abad ke-20), dan 16. 9 (universal untuk televisi HD dan televisi digital Eropa)