Jquery ile Resim Ortalamak

Bir DIV tagı ile sınırlandırılmış bir alana bir IMG tagını ortalayarak yerleştirmek

 


<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 kapsayici_width = $("#ana_resim_id").width();
            var kapsayici_height = $("#ana_resim_id").height();
            var image_width = $(this).width();
            var image_height = $(this).height();

            if(kapsayici_width){
               var Fark=Math.round((image_width-kapsayici_width)/2);
               $(this).css("left","-" + Fark + "px");
           }
           if(kapsayici_height){
               var Fark=Math.round((image_height-kapsayici_height)/2);
               $(this).css("top","-" + Fark + "px");
           }
       })
   });
</script>
<style type="text/css">
         #ana_resim_id { overflow:hidden; width:910px; height:400px; position: relative; z-index: 9999; }
         #ana_resim_img { position: relative; }
     </style>

</head>
<body>

    <div style="margin-top:50px;">
        <div style="width:950px; height: 650px; margin:0 auto; background-color: #C5C5C5;">

            <div style="padding: 20px;">
                <div id="ana_resim_id">
                   
                    <img id="ana_resim_img" src="/rs/ft/ftorj/test_2.jpg" />
                   
                </div>
            </div>

        </div>
    </div>

</body>
</html>
 

 

Jquery ile Resim Ortalamak

Yorumunuzu Ekleyin


Yükleniyor...
Yükleniyor...