Cara Mudah Merubah Ukuran Gambar Di Blog Tanpa Harus Diedit
Cara Merubah Ukuran Gambar dengan Css. Cara ini sangat mudah dilakukan ketimbang kamu harus mengeditnya terlebih dahulu dengan aplikasi editor.
Cara merubah ukuran gambar dengan css ini bisa kamu terapkan dalam postingan blog atau tema/template blog kamu. Hal ini bisa kamu lakukan secara manual dan otomatis kesemua gambar, ini pun tergantung kebutuhan dan keinginan kamu sendiri.
Menurut spot lebih baik menggunakan cara manual saja, jadi perubahan yang kamu terapkan nanti akan berpengaruh pada gambar itu saja, artinya tidak akan merubah ukuran gambar selain yang kamu inginkan.
Jika kamu ingin merubah ukuran gambar tertentu dipostingan yang telah kamu terbitkan, caranya kamu cari postingan dan gambar tersebut dan kemudian kamu ubah ukurannya dengan menggunakan kode style css.
Sebagai contoh, misalkan seperti berikut:
Ukuran bawaan gambar tersebut 700px × 300px, maka oto matis gambar tesebut akan kelebaran dan melebihi batas maksimal lebar blog kamu. Jadi untuk merubahnya kamu bisa membatasi gambar tersebut sampai ukuran 100 persen.
Jika kamu menggunakan ukuran maksimal gambar 100%, maka gambar tersebut akan sesuai pada segala jenis pengguna. Maksudnya siapa saja yang menggunakan atau berkunjung di blog kamu dengan menggunakan perangkat apa saja dengan ukuran layarnya macam-macam, kamu tidak perlu khawatir lagi karena gambar yang ada di blog kamu akan sesuai untuk semua ukuran layar perangkat si pengguna tersebut.
Dan berikut ini adalah cara penerapannya:
Misalkan ukuran asli sebuah gambar lebarnya 800 pixel dan tingginya 400 pixel, ukuran tersebut terlalu besar untuk berada didalam suatu artikel atau postingan blog. Untuk merubahnya bisa kamu ikuti langkah-langkah berikut.
Ukuran asli 800x400 pixel:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ74-dYFuToSYKomJIP2_rQdD1jd0OMNtzAYtvNTf0oZdzkYbFuDQ5FIgjQB6Ql9_JIoTuse7qukqpiMlqAsC1i_faxOKpR3iBj092LbsG-5ub4yXc6Oppf7EcFJL84Cj6wciAsfg_r8Zp/s1600/wanita-cantik-miss-grand-2017-indonesia-43.jpg" />
Nah untuk ukuran lebar 800px seperti contoh, maka gambar ini akan keluar daripada batas lebar blog kamu. Untuk mengatasinya tanpa perlu kamu edit gambar tersebut, kamu bisa menambahkan style width 100% dalam tag image.
Sebagai contoh:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ74-dYFuToSYKomJIP2_rQdD1jd0OMNtzAYtvNTf0oZdzkYbFuDQ5FIgjQB6Ql9_JIoTuse7qukqpiMlqAsC1i_faxOKpR3iBj092LbsG-5ub4yXc6Oppf7EcFJL84Cj6wciAsfg_r8Zp/s1600/wanita-cantik-miss-grand-2017-indonesia-43.jpg" style="width:100%;" />
Maka hasilnya:
Untuk melihat ukuran asli dari gambar di atas kamu bisa klik gambar tersebut dan akan terbuka gambar bawaannya dengan ukuran 800px (lebar) dan 400px (tinggi).
Nah sampai titik ini maka sudah selesai tugas spot untuk menulis artikel ini, dan harapan spot semoga bisa bermanfaat untuk pemula dan yang lain.
Keyword: css resizing, css riset, image resize, css img, img html, css ukuran gambar, gambar dengan css, gambar dalam postingan, css gambar di html, edit gambar di html.
Cara merubah ukuran gambar dengan css ini bisa kamu terapkan dalam postingan blog atau tema/template blog kamu. Hal ini bisa kamu lakukan secara manual dan otomatis kesemua gambar, ini pun tergantung kebutuhan dan keinginan kamu sendiri.
Menurut spot lebih baik menggunakan cara manual saja, jadi perubahan yang kamu terapkan nanti akan berpengaruh pada gambar itu saja, artinya tidak akan merubah ukuran gambar selain yang kamu inginkan.
Jika kamu ingin merubah ukuran gambar tertentu dipostingan yang telah kamu terbitkan, caranya kamu cari postingan dan gambar tersebut dan kemudian kamu ubah ukurannya dengan menggunakan kode style css.
Sebagai contoh, misalkan seperti berikut:
Ukuran bawaan gambar tersebut 700px × 300px, maka oto matis gambar tesebut akan kelebaran dan melebihi batas maksimal lebar blog kamu. Jadi untuk merubahnya kamu bisa membatasi gambar tersebut sampai ukuran 100 persen.
Jika kamu menggunakan ukuran maksimal gambar 100%, maka gambar tersebut akan sesuai pada segala jenis pengguna. Maksudnya siapa saja yang menggunakan atau berkunjung di blog kamu dengan menggunakan perangkat apa saja dengan ukuran layarnya macam-macam, kamu tidak perlu khawatir lagi karena gambar yang ada di blog kamu akan sesuai untuk semua ukuran layar perangkat si pengguna tersebut.
Dan berikut ini adalah cara penerapannya:
Misalkan ukuran asli sebuah gambar lebarnya 800 pixel dan tingginya 400 pixel, ukuran tersebut terlalu besar untuk berada didalam suatu artikel atau postingan blog. Untuk merubahnya bisa kamu ikuti langkah-langkah berikut.
Ukuran asli 800x400 pixel:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ74-dYFuToSYKomJIP2_rQdD1jd0OMNtzAYtvNTf0oZdzkYbFuDQ5FIgjQB6Ql9_JIoTuse7qukqpiMlqAsC1i_faxOKpR3iBj092LbsG-5ub4yXc6Oppf7EcFJL84Cj6wciAsfg_r8Zp/s1600/wanita-cantik-miss-grand-2017-indonesia-43.jpg" />
Nah untuk ukuran lebar 800px seperti contoh, maka gambar ini akan keluar daripada batas lebar blog kamu. Untuk mengatasinya tanpa perlu kamu edit gambar tersebut, kamu bisa menambahkan style width 100% dalam tag image.
Sebagai contoh:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ74-dYFuToSYKomJIP2_rQdD1jd0OMNtzAYtvNTf0oZdzkYbFuDQ5FIgjQB6Ql9_JIoTuse7qukqpiMlqAsC1i_faxOKpR3iBj092LbsG-5ub4yXc6Oppf7EcFJL84Cj6wciAsfg_r8Zp/s1600/wanita-cantik-miss-grand-2017-indonesia-43.jpg" style="width:100%;" />
Maka hasilnya:
Untuk melihat ukuran asli dari gambar di atas kamu bisa klik gambar tersebut dan akan terbuka gambar bawaannya dengan ukuran 800px (lebar) dan 400px (tinggi).
Nah sampai titik ini maka sudah selesai tugas spot untuk menulis artikel ini, dan harapan spot semoga bisa bermanfaat untuk pemula dan yang lain.
Keyword: css resizing, css riset, image resize, css img, img html, css ukuran gambar, gambar dengan css, gambar dalam postingan, css gambar di html, edit gambar di html.
0 Response to "Cara Mudah Merubah Ukuran Gambar Di Blog Tanpa Harus Diedit"
Posting Komentar