Tutorial Belajar CSS Bagian 53 : Cara Menggunakan Property Zoom di CSS

Pada tutorial sebelumnya, kita sudah belajar tentang Tutorial Belajar CSS Bagian 52 : Cara Menggunakan Property Padding di CSS. Pada tutorial ini kita akan belajar tentang cara menggunakan property zoom di CSS.

Property CSS zoom ini berfungsi untuk menskalakan konten. Property ini mengatur tingkat pembesaran konten. Selain menggunakan property ini, kita juga bisa menggunakan transform: scale(); Property.

Penggunaan property CSS zoom ini tidak disarankan karena tidak didukung di beberapa browser. Ini adalah fitur non-standar, yang disarankan untuk tidak digunakan di website produksi.

Property ini awalnya diimplementasikan di browser IE.

Sintaksis :

Zoom : normal | number | percentage | reset ;

Property ini mendukung nilai-nilai yang disebutkan di atas, berikut pembahasananya :

Property	Deskripsi
normal	Ini menunjukkan elemen ke ukuran normalnya. Ini mendefinisikan ukuran normal elemen. Ini menampung konten normal, tidak memperkecil atau memperbesar. Ini memiliki nilai zoom: 1;
number	Ini adalah nilai float positif yang menunjukkan faktor zoom. Nilainya yang lebih kecil dari 1,0 berarti memperkecil (atau memperkecil ukuran), dan lebih besar dari 1,0 berarti memperbesar (memperbesar ukuran). Misalkan kita menentukan zoom: 1.5; maka, konten tersebut akan menjadi 1,5 kali lebih besar dari konten aslinya.
percentage	Ini mendefinisikan nilai dalam persentase. Nilai 100%nya setara dengan normal. Ini menskalakan konten menggunakan nilai persentase. Nilainya lebih besar dari 100% berarti memperbesar, dan nilai kurang dari 100% berarti memperkecil. Misalkan jika kita memberi nilai zoom: 175%; berarti konten tersebut akan 175% lebih besar dari konten aslinya.

Kita dapat memahami sifat ini dengan menggunakan beberapa contoh berikut.

Contoh 1 :

<!DOCTYPE html>    
<html>    
    
<head>    
    <title>    
    CSS zoom   
    </title>    
    <style>    
        h1 {    
        color: red;           
        }    
        h2{  
        color: blue;  
        }  
        .magnify1{   
        zoom: 0.75;   
        }   
        .magnify{   
        zoom: 1.5;   
        }   
          
    </style>    
</head>    
    
<body>    
    <center>             
        <h1>Property CSS zoom </h1>              
        <div>    
        <h2>Gambar Asli</h2>  
            <img class="original" src= "https://mbahwp.com/wp-content/uploads/2023/09/pinguin.jpeg">    
        <h2> Gambar yang diperbesar zoom: 0.75;</h2>  
            <img class="magnify1" src= "https://mbahwp.com/wp-content/uploads/2023/09/pinguin.jpeg">               
        <h2> Gambar yang diperbesar zoom: 1.5;</h2>  
            <img class="magnify" src= "https://mbahwp.com/wp-content/uploads/2023/09/pinguin.jpeg">    
        </div>    
    </center>    
</body>    
</html>

Contoh 2 :

<!DOCTYPE html>    
<html>    
<head>    
    <title>    
    CSS zoom   
    </title>    
    <style>    
     h1 {    
     color: red;           
     }    
    .magnify{  
    width: 100px;  
    height: 100px;  
    border-radius: 30px;  
    display: inline-block;  
    color: white;  
   }  
   #m1 {  
   background-color: blue;  
   zoom: normal;  
   }  
   #m2 {  
   background-color: yellow;  
   zoom: 200%;  
   color: black;  
   }  
   #m3 {  
   background-color: green;  
   zoom: 2.9;  
   }         
   p{  
   padding-top:20px;  
   }  
    </style>    
</head>    
    
<body>    
  <center>             
  <h1>Property CSS zoom</h1>              
  <div id="m1" class="magnify"><p>zoom: normal;<p></div>  
  <div id="m2" class="magnify"><p>zoom: 200%;<p></div>  
  <div id="m3" class="magnify"><p>zoom: 2.9;<p></div>      
  </center>    
<body>    
</html>

Semoga tutorial property zoom ini membantu Anda untuk memahami cara memperbesar atau memperkecil sebuah objek atau konten di website Anda.