Saya hampir gila mencoba me-resize dan memposisikan tengah beberapa gambar di dalam div yang mempunyai property overflow: hidden. Terlalu berlebihan ya? hehehe… Tapi memang sulit. Ukuran gambar tersebut berbeda-beda, portrait atau landscape, yang jelas dia lebih besar dari ukuran div itu. Saya belum bisa ngakalinnya bermodalkan CSS saja.
Meskipun mentok dengan CSS, saya akhirnya ngakalin dengan bantuan Javascript. Dengan memanfaatkan Javascript saya bisa untuk merubah ukuran dan posisi gambar secara dinamis. Bisa lebih dari itu sih, tapi untuk pemula seperti saya ini bisa sangat membantu melayout halaman.
Dulu saya pernah buat script untuk Resize & crop gambar dengan Codeigniter. Nah script ini memakai hitung-hitungan yang sama. Kalau Codeigniter kalkulasinya oleh PHP di sisi server, yang ini di sisi client/browser. Cara ini bisa dipermudah dengan menggunakan framework Javascript. Saya belum coba, tapi kalau ada cara yang lebih mudah lagi, mohon dipost di sini. Makasih.
Di bawah berikut kira-kira contoh scriptnya. Kedua gambar yang berukuran besar dengan orientasi yang berbeda, portrait dan landscape ini saya letakkan sebagai icon dalam div dengan property overflow hidden. Prosesnya mudah, tetapi agak panjang, yaitu membandingkan rasio dua ukuran untuk menentukan orientasi kemudian me-resize dan menghitung posisi tengah. Ini contohnya: Demo.
<html>
<head>
<title>Resize proporsional & posisi center dengan Javascript</title>
<style type="text/css">
.test {
border:1px solid;
margin-top:100px;
margin-left:250px;
width:150px;
height:150px;
overflow: hidden;
float: left;
}
.test img {
}
</style>
<script type="text/javascript">
window.onload = function() {
var $images = document.getElementsByTagName('img');
$x=150;
$y=150;
for($i=0; $i<$images.length; $i++)
{
$new_size = resize_min($images[$i].width, $images[$i].height, $x, $y);
$images[$i].style.width = $new_size[0];
$images[$i].style.height = $new_size[1];
$images[$i].style.marginLeft = -(($new_size[0]-$x)*.25) + "px";
$images[$i].style.marginTop = -(($new_size[1]-$y)*.25) + "px";
}
function resize_min($x0, $y0, $x1, $y1) {
$xs=$x0/$x1;
$ys=$y0/$y1;
if ($ys>$xs){
$x2 = $x1;
$y2 = $x1 * ($y0/$x0);
}
else {
$x2 = $y1 * ($x0/$y0);
$y2 = $y1;
}
return [$x2, $y2];
}
}
</script>
</head>
<body>
<h1>Resize proporsional & posisi center dengan Javascript</h1>
<div>
<img src="img01.jpg" />
</div>
<div>
<img src="img02.jpg" />
</div>
</body>
</html>Update berikut untuk penggunaan dengan jQuery. Ada beberapa tambahan script untuk mengukur dimensi ketika dalam keadaan gambar hidden.
$(document).ready(function() {
$('img').each(function() {
var x = 150;
var y = 150;
var ratio = x/y;
if ($(this).height() > 0) {
var width = $(this).width();
var height = $(this).height();
} else {
var elem_clone = $(this).clone()
.attr("id", false)
.css({visibility:"hidden", display:"block", position:"absolute"});
$("body").append(elem_clone);
var width = elem_clone.width();
var height = elem_clone.height();
elem_clone.remove();
}
$new_size = resize_min(width, height, x, y);
$(this).css("width", $new_size[0]);
$(this).css("height", $new_size[1]);
$(this).css("marginLeft", -(($new_size[0]-x)*.5) + "px");
$(this).css("marginTop", -(($new_size[1]-y)*.5) + "px");
});
});
