Cara Mengubah Ukuran Gambar pada CSS

Cara Mengubah Ukuran Gambar pada CSS - Tutorial dumetschool kali ini akan membahas bagaimana Cara Mengubah Ukuran Gambar pada CSS karena mungkin diantara teman - teman ada yang masih belajar dan bingung bagaimana cara mengubah ukuran dari besar ke kecil maupun sebaliknya dengan CSS. Caranya sangat mudah sekali jika teman - teman faham properti apa yang harus digunakan.

Untuk mengubah ukuran gambar, terdapat beberapa properti yang biasa digunakan yakni dengan properti width dan height supaya lebih jelas saya akan praktekan penggunaan properti tersebut kepada objek gambar.

Silahkan kalian bisa membuat struktur HTML dan menyematkan satu gambar sebagai objek yang akan diubah ukuran nya, disarankan gambar berukuran besar ya agar kelihatan perbedaan ketikan di resize.

<body>
    <div class="container">
        <img src="html-1080x500.png" alt="Cara Mengubah Ukuran Gambar pada CSS">
    </div>
</body>

Secara default ukuran gambar awal adalah 1080x500 tentu dengan CSS bisa kita ubah ukuran menjadi lebih kecil atau sebaliknya dengan properti width dan height. Untuk mengubah ukuran nya silahkan kalian ketikan CSS berikut.

<style>
    .container {
        width: 1000px;
        height: 500px;
        border: 2px solid #000000;
    }
    img {
        width: 900px;
        height: 400px;
    }
</style>

Dari sintak CSS diatas penggunaan width dan height bisa kita pakai untuk mengubah ukuran gambar, box dan yang lainnya. Jika sudah kalian bisa melihat perbedaan setelah gambar di resize.

Mudah sekali bukan Cara Mengubah Ukuran Gambar pada CSS. Saya cukupkan pembahasan sederhana tentang CSS, semoga bermanfaat dan sampai jumpa diartikel dumetschool selanjutnya.

22 Juni 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat