Cara Mudah Merubah Ukuran Gambar Di Blog Tanpa Harus Diedit

SPOTROID - Cara Merubah Ukuran Gambar dengan CSS. Cara ini sangat mudah dilakukan ketimbang sobat harus mengeditnya terlebih dahulu dengan aplikasi editor.

Cara merubah ukuran gambar dengan CSS ini bisa sobat terapkan dalam postingan blog atau tema/template blog sobat. Hal ini bisa sobat lakukan secara manual dan otomatis kesemua gambar, ini pun tergantung kebutuhan dan keinginan sobat sendiri.

Menurut spot lebih baik menggunakan cara manual saja, jadi perubahan yang sobat terapkan nanti akan berpengaruh pada gambar itu saja, artinya tidak akan merubah ukuran gambar selain yang sobat inginkan.

Jika sobat ingin merubah ukuran gambar tertentu dipostingan yang telah sobat terbitkan, caranya sobat cari postingan dan gambar tersebut dan kemudian sobat 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 sobat. Jadi untuk merubahnya sobat bisa membatasi gambar tersebut sampai ukuran 100 persen.

Jika sobag menggunakan ukuran maksimal gambar 100%, maka gambar tersebut akan sesuai pada segala jenis pengguna. Maksudnya siapa saja yang menggunakan atau berkunjung di blog sobat dengan menggunakan perangkat apa saja dengan ukuran layarnya macam-macam, sobat tidak perlu khawatir lagi karena gambar yang ada di blog sobat 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 sobat ikuti langkah-langkah berikut.

Ukuran asli 800x400 pixel:
<img src="https://3.bp.blogspot.com/-jyPeePHLrsw/Wdo_9w1gsGI/AAAAAAAAA64/CRh3w0pyAbcJ-PUJgZ0icBMx9xZiyccrgCLcBGAs/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 sobat. Untuk mengatasinya tanpa perlu sobat edit gambar tersebut, sobat bisa menambahkan style width 100% dalam tag image.

Sebagai contoh:
<img src="https://3.bp.blogspot.com/-jyPeePHLrsw/Wdo_9w1gsGI/AAAAAAAAA64/CRh3w0pyAbcJ-PUJgZ0icBMx9xZiyccrgCLcBGAs/s1600/wanita-cantik-miss-grand-2017-indonesia-43.jpg" style="width:100%;" />

Tidak menampilkan pratinjau di dokumen HTML

Untuk melihat ukuran asli dari gambar di atas sobat 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.

Salam sukses...
BLOG: Awak Blang Awe

YUK IKUTAN BERPARTISIPASI
Anda suka dengan artikel di atas? Bagikan!
Dengan 1x Anda membagikan artikel blog ini, artinya Anda telah ikut serta dalam menunjang berkembangnya blog "Spot Teknologi Android". Sekecil apapun usaha partisipasi Anda sangat berarti bagi blog ini, terimakasih.