Cara Mengurangkan Gambar Dalam Html

Isi kandungan:

Cara Mengurangkan Gambar Dalam Html
Cara Mengurangkan Gambar Dalam Html

Video: Cara Mengurangkan Gambar Dalam Html

Video: Cara Mengurangkan Gambar Dalam Html
Video: MENGATASI GAMBAR TIDAK MUNCUL DI HTML 2024, Mungkin
Anonim

Dalam bahasa markup hiperteks (HTML), perintah khas "tag" digunakan untuk menampilkan gambar pada halaman. Tag ini disebut sebagai img dan mengandungi sekumpulan pemboleh ubah - "atribut". Dengan bantuan atribut, anda dapat menentukan semua aspek paparan gambar di halaman hiperteks, termasuk dimensinya. Namun, ini bukan satu-satunya cara untuk menyelesaikan masalah - anda juga dapat mengurangkan ukuran gambar menggunakan Cascading Style Sheets (CSS).

Cara mengurangkan gambar dalam html
Cara mengurangkan gambar dalam html

Arahan

Langkah 1

Letakkan atribut tinggi dan lebar pada tag yang bertanggungjawab untuk memaparkan gambar yang diinginkan. Tetapkan yang pertama ke ukuran menegak gambar, dan yang kedua secara mendatar. Tetapkan kedua-dua nombor dalam piksel, tetapi tidak perlu menunjukkan unit - px - di sini. Semasa mengira nilai yang diperlukan untuk atribut ini, perhatikan kepatuhan pengurangan gambar, jika tidak, ia akan dipaparkan dalam bentuk yang terdistorsi. Sebagai contoh, untuk memasukkan halaman gambar separuh dari fail bernama SomePic.jpg, dimensi awalnya adalah 500 x 300 piksel, tag dapat dilakukan dengan perintah berikut:

Langkah 2

Anda boleh menetapkan pengurangan berkadar dimensi gambar asal dalam bentuk peratus. Untuk melakukan ini, gunakan hanya atribut ketinggian tanpa menentukan lebar, dan tambahkan tanda persen setelah menentukan nombor yang menentukan ukuran. Sebagai contoh, anda boleh mencapai kesan yang sama seperti pada contoh dari langkah sebelumnya dengan teg yang ditulis dalam bentuk ini:

Langkah 3

Sekiranya anda ingin menentukan ukuran gambar menggunakan deskripsi gaya, gunakan nama tag yang sama - img - dan atribut - lebar dan tinggi. Dalam kes ini, unit pengukuran - px, pt atau% - mesti selalu ditentukan. Untuk menetapkan separuh ukuran semua gambar di halaman, masukkan entri berikut dalam blok deskripsi gaya: img {height: 50%;} Sekiranya anda perlu mengurangkan ukuran satu gambar sahaja, tambahkan atribut id tambahan ke tegnya dan memberikannya yang unik untuk gambar nilai halaman ini - sebagai contoh, PicOne: Tambahkan nilai yang sama ke rakaman gaya, memisahkannya dengan "hash" # dari nama tag. Huraian gaya lengkap dalam kes ini mungkin kelihatan seperti ini: img # OnePic {tinggi: 50%;}

Disyorkan: