Kita dapat menskalakan gambar besar dalam HTML menggunakan properti width dan height pada gambar. Gambar berukuran besar akan keluar dari tepi layar. Untuk menskalakan gambar ke ukuran viewport, kita dapat menggunakan wadah dan menyetel properti height dan width ke tinggi dan lebar viewport. Kita dapat menggunakan unit vh dan vw untuk mengatur ukuran. Satu unit vh dan vw sesuai dengan 1 % tinggi dan lebar viewport. Kita dapat mengatur tinggi dan lebar gambar menggunakan pengaturan ke .container{ height:100vh; width: 100vw; } img { width : 100%; height: 100%; } 1. Gambar harus dimasukkan ke dalam wadah. Kemudian, gambar berukuran besar akan masuk ke viewport
Misalnya, buat .container{ height:100vh; width: 100vw; } img { width : 100%; height: 100%; } _2 dalam HTML dengan kelas .container{ height:100vh; width: 100vw; } img { width : 100%; height: 100%; } 3. Di dalam .container{ height:100vh; width: 100vw; } img { width : 100%; height: 100%; } _2 tulis tag .container{ height:100vh; width: 100vw; } img { width : 100%; height: 100%; } 5 dan sisipkan gambar berukuran besar. Di CSS, pilih kelas .container{ height:100vh; width: 100vw; } img { width : 100%; height: 100%; } 3 dan setel height dan width ke .container{ height:100vh; width: 100vw; } img { width : 100%; height: 100%; } 9 dan
Pada contoh di bawah ini, kami menskalakan gambar besar agar sesuai dengan viewport menggunakan unit seperti vh, vw, dan
Kode Contoh
.container{ height:100vh; width: 100vw; } img { width : 100%; height: 100%; }
Gunakan Properti width dan
9 untuk Menskalakan Gambar dalam HTML
Kita dapat menggunakan properti width dan
Misalnya, di dalam badan HTML, tulis tag width2. Di dalam tag width2, tentukan jalur ke gambar dengan atribut height0. Kemudian, berikan width dari height2 dan
Kami telah menggunakan properti width dan
Properti background-size CSS memungkinkan Anda mengubah ukuran gambar latar belakang suatu elemen, mengesampingkan perilaku default untuk menyusun gambar dalam ukuran penuh dengan menentukan lebar dan/atau tinggi gambar. Dengan melakukannya, Anda dapat menskalakan gambar ke atas atau ke bawah sesuai keinginan
Mari pertimbangkan gambar besar, gambar logo Firefox berukuran 2982x2808. Kami ingin (untuk beberapa alasan yang mungkin melibatkan desain situs yang sangat buruk) untuk menyusun empat salinan gambar ini menjadi elemen berukuran 300x300 piksel. Untuk melakukannya, kita dapat menggunakan nilai tetap background-size 150 piksel
<div class="tiledBackground"></div>
.tiledBackground { background-image: url(//www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: 150px; width: 300px; height: 300px; border: 2px solid; color: pink; }
Anda juga dapat menentukan ukuran gambar horizontal dan vertikal, seperti ini
background-size: 300px 150px;
Hasilnya terlihat seperti ini
Di ujung lain spektrum, Anda dapat memperbesar gambar di latar belakang. Di sini kami menskalakan favicon 32x32 piksel menjadi 300x300 piksel
.square2 { background-image: url(favicon.png); background-size: 300px; width: 300px; height: 300px; border: 2px solid; text-shadow: white 0px 0px 2px; font-size: 16px; }
Seperti yang Anda lihat, CSS sebenarnya pada dasarnya identik, simpan nama file gambarnya
Selain nilai .tiledBackground { background-image: url(//www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: 150px; width: 300px; height: 300px; border: 2px solid; color: pink; } _0, properti background-size CSS menawarkan dua nilai ukuran khusus, .tiledBackground { background-image: url(//www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: 150px; width: 300px; height: 300px; border: 2px solid; color: pink; } 2 dan .tiledBackground { background-image: url(//www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: 150px; width: 300px; height: 300px; border: 2px solid; color: pink; } 3. Mari kita lihat ini
Nilai .tiledBackground { background-image: url(//www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: 150px; width: 300px; height: 300px; border: 2px solid; color: pink; } 2 menentukan bahwa, terlepas dari ukuran kotak yang berisi, gambar latar belakang harus diskalakan sehingga setiap sisi sebesar mungkin tanpa melebihi panjang sisi yang sesuai dari wadah. Coba ubah ukuran contoh di bawah untuk melihat ini beraksi
HTML
<div class="bgSizeContain"> <p>Try resizing this element!</p> </div>
CSS
.bgSizeContain { background-image: url(//www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: contain; width: 160px; height: 160px; border: 2px solid; color: pink; resize: both; overflow: scroll; }
Hasil
Nilai .tiledBackground { background-image: url(//www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: 150px; width: 300px; height: 300px; border: 2px solid; color: pink; } _3 menentukan bahwa ukuran gambar latar harus sekecil mungkin sambil memastikan bahwa kedua dimensi lebih besar atau sama dengan ukuran wadah yang sesuai. Coba ubah ukuran contoh di bawah untuk melihat ini beraksi