Question

I wanna center a image within a div that has overflow hidden

Like a frame and then picture no matter size are centered.

<div class="holder">
   <div id="frame">
      <img src="http://www.travelblog.org/Wallpaper/pix/tb_fiji_sunset_wallpaper.jpg" class="centerme"/>
   </div>
</div>​

See picture for more info:

standard state is how it always gonna be with overflow:hidden;

but need it to always center even its a picture 3 times bigger than the frame

*heres the JSfiddle
http://jsfiddle.net/UL3qp/4/

*EDIT
Last needed is to loop this incident

Answer 1

Centering the image with jQuery is simple – via setting a positive or negative margin-left property:

$(document).ready(function(){
    var fwidth = $('#frame').width();
    var iwidth = $('#frame img').width();
    $('#frame img').css('margin-left', Math.floor((fwidth-iwidth)/2));
});

With only the pure CSS it can be done via a background image css property instead of using the img tag.