Sitenize yüklediğiniz resimlerin yükseklik ve genişliği oranında yeniden istenilen genişliğe veya yüksekliğe göre yeniden boyutlandırma örneği. Sayfa yüklenince yeni boyutuyla görünmektedir.
Head etiketleri arasına katacağımız kod
<script type="text/javascript" src="jquery.js"></script>
$(window).load(function()
{
var resim_genislik = $(".urun_resim").width();
var resim_yukseklik = $(".urun_resim").height();
if ((isNaN(resim_genislik) == false) && (isNaN(resim_yukseklik) == false))
{
if (resim_genislik > 0 && resim_yukseklik > 0)
{
var intResim_Genislik = parseInt(''+ resim_genislik +'', 10);
var intResim_Yukseklik = parseInt(''+ resim_yukseklik +'', 10);
var resim_oran = intResim_Genislik/intResim_Yukseklik;
resim_oran = parseFloat(''+ resim_oran +'');
var resim_oran = resim_genislik/resim_yukseklik;
var intVarsayilan_Genislik = 300;
var varsayilan_yukseklik = intVarsayilan_Genislik / resim_oran;
$("img.urun_resim").css({width : "" + intVarsayilan_Genislik + "px", height : "" + varsayilan_yukseklik + "px"});
}
}
});
Body etiketleri arasına katacağımız kod
<img class="urun_resim" src="resim.png" alt="" />
