Pada pembuatan website, terkadang kita harus menentukan tinggi dan lebar suatu elemen agar sesuai dengan desain yang sudah ditentukan oleh desainer. Misalnya pada suatu website kita harus menampilkan image dengan tinggi 200px dan 400px, sedangkan image yang kita punya ukurannya tidak sesuai dengan kondisi diatas. Bagaimana cara merubah ukuran image tersebut menggunakan CSS ?
Kita bisa mengatur tinggi dan lebar suatu elemen tersebut menggunakan property height dan width. Contohnya :
img {
height: 200px;
width: 300px;
}Pada contoh diatas, semua img yang berada pada website akan memiliki tinggi 200px dan lebar 400px.
Disini kita akan membuat halaman web yang menampilkan sebuah artikel dan gambar. Namun gambar yang ditampilkan terlalu besar, sehingga perlu diubah ukurannya menggunakan property height dan width pada CSS.
Kita buat struktur HTML untuk halaman artikel seperti dibawah, lalu kita buka file tersebut pada web browser.
<!-- index.html -->
<html>
<head>
<title>Judul</title>
</head>
<body>
<img
src="https://cdn2.tstatic.net/tribunnews/foto/bank/images/bromo-tengger-semeru-national-park.jpg"
/>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi similique
velit, voluptatibus debitis expedita neque at iusto consequatur tenetur
ipsam sit vitae minima ratione. Beatae soluta reiciendis eveniet neque
molestias veniam eaque facere ad illo numquam sapiente, adipisci eos sed
sint, facilis itaque amet consectetur et velit. In, accusantium minus?
</p>
</body>
</html>Berikut tampilan dari web tersebut
Gambar tersebut terlalu besar, sehingga tampilan artikel tidak proporsional, dimana paragrafnya terlalu sedikit sedangkan gambarnya terlalu besar. Sehingga ukuran gambar perlu diperbaiki menggunakan width dan height pada CSS. Ukuran gambar sebelum kita ubah memiliki height sebesar 393px dan width 700px
Maka dari itu kita membutuhkan 1 file CSS baru dengan nama index.css untuk memperbaiki ukuran gambar.
/* index.css */
img {
height: 200px;
width: 400px;
}Lalu kita masukkan file CSS tersebut kedalam HTML kita. Panggil file CSS menggunakan tag <link> di dalam tag <head>
<!-- index.html -->
<html>
<head>
<title>Judul</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<img
src="https://cdn2.tstatic.net/tribunnews/foto/bank/images/bromo-tengger-semeru-national-park.jpg"
/>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi similique
velit, voluptatibus debitis expedita neque at iusto consequatur tenetur
ipsam sit vitae minima ratione. Beatae soluta reiciendis eveniet neque
molestias veniam eaque facere ad illo numquam sapiente, adipisci eos sed
sint, facilis itaque amet consectetur et velit. In, accusantium minus?
</p>
</body>
</html>
Untuk menentukan ukuran maksimal dari suatu elemen, kita dapat menggunakan property max-height dan max-width. Sehingga ukuran maksimal dari elemen img tidak bisa melewati batas yang telah kita tetapkan. Kita beri batas untuk height maksimal 500px dan width maksimal 300px
img {
max-height: 500px;
max-width: 300px;
}
Untuk menentukan ukuran minimal dari suatu elemen, kita dapat menggunakan property min-height dan min-width. Sehingga apabila gambar kita memiliki ukuran lebih kecil dari batas minimal yang kita tentukan, akan disesuaikan dengan min-height dan min-width pada styling kita. Pada contoh kita beri ukuran minimal untuk img adalah height 400px dan width 1000px.
img {
min-height: 400px;
min-width: 1000px;
}