Centering a picture

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: enter image description here

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

everything i tried like absolute, and stuff dont really make any solution im out of idears thats why i ask, this is being used in a foreach so the backend gonna make it for over 150 items atm. atm i just got the standard css, 1 sec then im gonna make a jsfiddle — Simon Dragsbæk, Aug 30 '12 at 09:19
a plain `text-align: center;` will do the trick: http://jsbin.com/ufozol/1/ — balexandre, Aug 30 '12 at 09:23
no i know how to center a image im looking for a way to center it within a frame look at the jsfiddle — Simon Dragsbæk, Aug 30 '12 at 09:28

score 1 · Answer 1 · answered Aug 30 '12 at 09:30

1

http://jsfiddle.net/HCabZ/2/ try out this for vertical align- center as well as right & left center

answered Aug 30 '12 at 09:30

Chandrakant

1,971
1
14
33

if you lower the size of your frame it wont overwrite the picture size – Simon Dragsbæk Aug 30 '12 at 09:37
i need a specific frame size and the frame is overflow hidden. and within that i need the center of the image to align with the center of the frame – Simon Dragsbæk Aug 30 '12 at 09:39

score 1 · Accepted Answer · edited May 23 '17 at 10:30

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.

edited May 23 '17 at 10:30

Community

1
1

answered Aug 30 '12 at 10:09

Stano

8,749
6
30
44

btw what do i have to do if i wanna do this math with multiple pictures – Simon Dragsbæk Aug 30 '12 at 11:35
Then I am glad it is useful. :) Added here a loop to center all images separately: http://jsfiddle.net/UL3qp/34/ – Stano Aug 30 '12 at 14:21
its a frame that surround the image and then frame is overflow, – Simon Dragsbæk Aug 30 '12 at 15:27
Ok, here are two its variants: http://jsfiddle.net/KSnjU/6/ or http://jsfiddle.net/KSnjU/7/ – Stano Aug 30 '12 at 15:55

score 0 · Answer 3 · edited Aug 30 '12 at 09:22

0

Add the styles:

#frame{padding:15px; text-align:center}
#frame img{max-width:100%}

Check this fiddle http://jsfiddle.net/HCabZ/

edited Aug 30 '12 at 09:22

Barrie Reader

10,647
11
71
139

answered Aug 30 '12 at 09:21

Sowmya

26,684
21
96
136

your frame is under the picture and not above like in the question. – lvil Aug 30 '12 at 09:23
this also just center the image – Simon Dragsbæk Aug 30 '12 at 09:33

Centering a picture

3 Answers3