Tambahkan Gambar dalam Penurunan Harga dan Ubah Ukuran Gambar

Untuk Menambahkan Gambar dalam Penurunan Harga:

Sintaksnya diberikan di bawah ini.

Untuk Memodifikasi Ukuran Gambar dalam Penurunan Harga:

Untuk mengubah ukuran gambar di Markdown, kami menggunakan tag “ ” pada HTML. Hanya tag ini yang membantu dalam memodifikasi ukuran gambar di Markdown dan sintaks tag “ ” ini diberikan di bawah ini.

Kita dapat mengubah ukuran gambar dengan mengatur nilai lebar dan tinggi dalam angka maupun dalam persentase. Kita juga bisa menggunakan atribut style di tag “ ” ini untuk mengubah ukuran gambar di Markdown.

Contoh #01:

Kami menggunakan Kode Visual Studio untuk melakukan kode penurunan harga. Untuk kode penurunan harga, kita harus membuka editor teks dan juga jendela pratinjau. Di editor teks, kita harus menambahkan input dan output diperoleh di jendela pratinjau. Di editor teks, pertama-tama kita tambahkan gambar di Markdown dengan menempatkan tanda “!' simbol dan kemudian tambahkan tanda kurung siku di mana kita menambahkan 'Alt text'. Sekarang, kami menambahkan jalur gambar.

Kami memasukkan nama gambar dengan ekstensinya karena kode dan gambar disimpan di direktori yang sama. Jadi, kita tinggal menambahkan nama di sini yaitu “cloud.png”. Kemudian, kami menambahkan teks yang 'Cloud Image' dan ini adalah teks yang hanya ditampilkan saat mouseover. Sekarang, gambar ditambahkan dan kita juga dapat melihat gambar ini di jendela pratinjau.

Gambar awan ditunjukkan di bawah ini karena kami telah menambahkan gambar ini dalam kode penurunan harga yang ditampilkan di atas.

Contoh #02:

Sekarang, kita memodifikasi ukuran gambar ini dengan menggunakan tag “ ”. Pertama, kita masukkan 'src' di mana nama atau jalur gambar ditambahkan. Setelah ini, kami menempatkan 'alt' dan menyesuaikan 'Cloud Image'. Kami menyesuaikan 'lebar' gambar menjadi '230'. 'Tinggi' disesuaikan ke '300'. Kami juga menambahkan 'judul' di tag ' ' ini dan nilai 'judul' ini adalah 'Judul awan'. Sekarang, ukuran gambar diubah. Anda dapat melihat ukuran gambar yang dimodifikasi di jendela pratinjau.

Ukuran gambar dalam hasil ini dimodifikasi dan 'lebar' gambar adalah '230' dan 'tinggi' adalah '300'. Ini karena kami telah menyesuaikan lebar dan tinggi ini dalam kode penurunan harga.

Contoh #03:

Kami juga dapat memodifikasi gambar 'lebar' dan 'tinggi' dengan menempatkan nilainya dalam persentase. Setelah menambahkan nama atau jalur gambar dan menyesuaikan 'alt' ke 'Cloud Image', kami telah mengatur 'lebar' dan 'tinggi' gambar menjadi '50%'. Kemudian, tambahkan 'judul' dan tutup tag ini.

Berikut adalah gambar yang ukurannya diubah dengan menggunakan tag “ ”. Tinggi gambar, serta lebarnya, adalah '50%'.

Contoh #04:

Sekarang, kita menggunakan atribut “style” di tag “ ” ini untuk mengubah ukuran gambar di Markdown. Kita harus menambahkan nama gambar dan kemudian atribut 'alt'. Setelah ini, kami menempatkan atribut 'gaya' dan menambahkan 'lebar dan tinggi' sebagai nilainya. 'Lebar' yang kami atur dalam piksel yaitu '500px' dan 'tinggi' adalah '400px'. Sekarang, ukuran gambar akan menyesuaikan.

Ukuran gambar dalam hasil ini telah diperbarui; 'lebar'-nya sekarang '500px' dan 'tinggi'-nya adalah '400px'. Ini terlihat sebagai hasil dari kode Markdown yang diberikan di atas di mana kita telah menyesuaikan lebar dan tinggi pada atribut style.

Contoh #05:

Kami menambahkan gambar lain. Namun dalam kode Markdown ini, kita tidak mengubah ukuran gambar. Ukuran gambar berubah hanya ketika kita telah menggunakan tag “ ”. Kami menempatkan '!' dan kemudian tambahkan teks di dalam tanda kurung siku yaitu 'Gambar Matahari'. Setelah menutup tanda kurung siku, kami menempatkan tanda kurung di mana kami telah memasukkan nama gambar 'New_sun.png' dan kemudian menambahkan teks yang akan ditampilkan pada mouseover. Ukuran asli gambar akan ditampilkan di hasil.

Gambar matahari ditampilkan karena kami telah menambahkan gambar ini dalam kode penurunan harga. Selain itu, ukuran asli gambar terlihat karena kami tidak dapat menyesuaikan ukuran gambar tanpa menggunakan tag “ ”.

Contoh #06:

Dengan menggunakan tag “ ”, kita sekarang mengubah ukuran gambar ini. Pertama, kita tambahkan nama atau jalur gambar yang ukurannya ingin kita ubah ke bidang 'src'. 'Lebar' dan 'tinggi' gambar keduanya telah diubah menjadi '300'. Ukuran gambar sekarang telah berubah. Jendela pratinjau menunjukkan ukuran baru gambar.

Lebar dan tinggi gambar telah dimodifikasi menjadi '300'.

Contoh #07:

Dengan menyetel nilai 'lebar' dan 'tinggi' gambar dalam persentase, kita dapat dengan mudah mengubah dimensi ini. Kami berdua menyesuaikan 'lebar' dan 'tinggi' gambar menjadi '40%' dan kemudian menutup tag ini.

Berikut adalah gambar dengan tinggi 40% dan juga lebar 40%. Kami telah menambahkan lebar dan tinggi ini di dalam tag “ ” setelah menambahkan nama gambar.

Contoh #08:

Sekarang, kita menggunakan atribut “style” di tag “ ” untuk mengubah ukuran gambar di Markdown. Kami menambahkan 'lebar dan tinggi' sebagai nilai ke atribut 'gaya' setelah menambahkan nama gambar dan atribut 'alt'. 'Lebar' yang kami tentukan adalah '450px', sedangkan 'tinggi' juga disesuaikan menjadi '450px.' Ukuran gambar sekarang akan berubah dengan tepat sesuai dengan nilai lebar dan tinggi yang baru ini.

Sekarang, hasil dari kode ini juga ditampilkan di jendela pratinjau yang ditampilkan di bawah ini. Baik lebar dan tinggi gambar ini sekarang menjadi '450px' dalam hasil di bawah ini.

Kesimpulan:

Kami telah menjelajahi konsep menambahkan gambar secara rinci dalam panduan ini dan kami juga telah menjelajahi cara mengubah ukuran gambar dalam Penurunan harga juga. Kami telah menambahkan gambar dalam Penurunan Harga dan memodifikasi ukurannya dengan bantuan tag “ ” dan telah menunjukkan cara melakukan semua ini dalam Penurunan Harga. Kami telah mengubah ukuran gambar dengan menempatkan nilai lebar dan tinggi dalam angka serta persentase. Kami juga telah menggunakan atribut gaya dalam tag “ ” untuk memperbarui atau memodifikasi ukuran gambar di Penurunan harga.