Menampilkan Media Dengan Ukuran Seragam & Tidak Terpotong Pada HTML CSS

Ketika ingin menata media (gambar / video) dengan ukuran yang sama atau biasa disebut tampilan Grid (Grid Style) suka terasa sulit karena bingung membuat ukuran gambar / merubah ukuran gambar secara otomatis di HTML CSS tanpa memotong bagian gambar sedikitpun. Pada artikel kali ini akan saya jelaskan tutorial resize ukuran media menjadi sama rata dan terlihat lebih menarik untuk di jadikan tampilan daftar / grid.

Perlu diperhatikan, untuk membuat hal seperti ini sebaiknya gunakan pembungkus pada media tersebut, misalnya pada tag img gambar sebaiknya dibungkus dengan kolom atau div jadi seperti ini:

<div>
    <img src="">
</div>

Cara ini lebih mudah digunakan, walaupun ada cara lainnya yang bisa dibilang tingkat lanjut untuk mengatur keseluruhan di CSS nya. Tidak perlu div, apapun bisa kalian jadikan pembungkus pada tag img tersebut.

Misalnya saya punya susunan gambar dengan struktur seperti diatas, maka pada kolom pembungkus (div) ini perlu kalian tambahkan style ini:

overflow: hidden;
max-width: 350px;
padding: 0;

Fungsinya, apapun yang ada didalam kolom HTML / div ini akan di:

overflow: hidden agar disembunyikan media yang lebih dari garis kolom HTML / div ini (jika ada kesalahan render code oleh browser).

max-width: 350px adalah batas lebar maksimal, ini tergantung pada kebutuhan kalian. Maka media yang ada didalam ini hanya akan tampil dengan ukuran 350px yang terlihat.

Padding: 0 hanya tambahan saja karena saya tidak ingin memberi jarak dalam pada kolom HTML / div ini.

Lalu pada media yang ada didalam kolom HTML / div ini perlu diatur seperti ini:

max-height: 200px;
display: block;
margin: auto;
width: 100%;"

Artinya, tinggi dari pembungkus tadi akan berdasarkan tinggi gambar dan tidak perlu kita atur tinggi kolom / div karena yang harus diatur adalah media yang ada didalamnya.

display: block akan membuat gambar ini berupa blok dan menginduk pada div.

margin: auto akan membuat gambar ini berposisi ditengah.

width: 100% mengatur lebar gambar menjadi 100% dari pembungkus dan pembungkus memiliki max-width 350px artinya gambar akan sesuai max-width dari pembungkus.

Hasilnya dari contoh yang saya buat akan seperti ini:

<div style="overflow: hidden; padding: 0; max-width: 350px;">
	<img style="max-height: 200px; display: block; margin: auto; width: 100%;" src="../img/foto/4Untitled-1.jpg">
</div>

Ini hanya contoh satu kolom saja, karena saya anggap kalian telah memiliki kolom sendiri dan ingin mengatur ukuran gambar saja.

Maka sekarang kolom / div yang sudah kalian buat (misalnya ada 3 kolom) akan menampilkan gambar yang sama ukurannya dan terlihat rapih. Hal ini tidak hanya untuk gambar saja tapi juga berfungsi untuk file video dan file sematan lainnya.

Masih bingung ? Lihat : Video tutorial cara membuat gambar dan video HTML CSS tidak terpotong.

Selamat mencoba !