Jquery İle Resim Boyutlandırma
Bir IMG tagının içinde bulunduğu DIV tağına göre yeniden boyutlandırılması, sayfanın genişliğinin değişmesi sonuçları değiştirecektir.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="/tm/foto_galeri_temp1/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#ana_resim_img").load(function(){
var doc_width = $("#ana_resim_id").width();
var doc_height = $("#ana_resim_id").height();
var image_width = $(this).width();
var image_height = $(this).height();
var image_ratio = image_width/image_height;
var new_width = doc_width;
var new_height = Math.round(new_width/image_ratio);
alert(new_width + " " +new_height);
$(this).width(new_width);
$(this).height(new_height);
if(new_height
new_height = doc_height;
new_width = Math.round(new_height*image_ratio);
$(this).width(new_width);
$(this).height(new_height);
var width_offset = Math.round((new_width-doc_width)/2);
$(this).css("left","-"+width_offset+"px");
}
})
});
</script>
<style type="text/css">
#ana_resim_id { overflow:hidden; padding: 20px; width:910px; height:400px; }
#ana_resim_img { }
</style>
</head>
<body>
<div style="margin-top:50px;">
<div style="width:950px; height: 650px; margin:0 auto; background-color: #C5C5C5;">
<div id="ana_resim_id">
<img id="ana_resim_img" src="/rs/ft/ftorj/test_2.jpg" />
</div>
</div>
</div>
</body>
</html>
