Centering image

I need to center an image in a div. The image may be wider than it is tall but I want the width and the height of the div to be the same.

I have tried using overflow: hidden but it doesn’t seem to work.

I have 2 divs with widths of 60px (for a thumb) and 490px (for an image rotator) and they will show the same 2048px X 1536px image. The images have NOT been resized.

  <div id="link_img">
    <img height="60" border="0" alt="Grimes Reading Light" class="center" src="images/qdotd/DSCF1882.JPG">


#link_img {
  position: absolute;
  top: 25px;
  border: 1px solid #313173;
  overflow: hidden;  
} {
  display: block;   
  text-align: center;
  margin-left: auto;   
  margin-right: auto; 


You’ll need to clarify that a little as I got lost somewhere within your logic :slight_smile:

If the outer div is 60px x 60px and you have applied overflow:hidden then the inner image will be clipped within that size.

If you want the inner image to be 60px by 60px then you would need to set a size accordingly (e.g.{width:100%;height:100%}).

In your example you set the height of the image only which means the that the width of the image will be whatever the intrinsic aspect ratio of the image was. You say it was originally 2048px x 1536px which means the the image width will be greater than its height.

I am unclear exactly what you wanted to happen and what you expect to happen or whether I have got the wrong end of the stick.

Pardon me for being so cryptic. I only included code for the 60X60 pic.

These images cannot be resized into thumbs, well, I guess I’m too lazy to do it in PHP, so I want to center the image in the 60X60 div.

If it was resized, it would be 80pxX60px and I want the image centered in the
60pxX60px div.

Now these images may not all be the same aspect ratio so it has to work for all ratios based on a 60px height.

Paul, I think I know what the goal is here.

When the 2048px x 1536px image is scaled to a 60px height then it’s width becomes 80px.

If all images were the same (but they won’t be) then we could just say margin-left:-10px; and it would be centered in the 60px wide div.

If we center the image with text-align:center on the parent then we can set over-sized negative margins on the left and right of the image itself. That should take care of any width differences among the scaled images.

Here is a live example, I painted a red line down the center of the image for visual reference.

I’m using 160px x 160px on the div and image so I can see what is going on but it worked the same with 60px everywhere.

#link_img {
    position: absolute;
    top: 25px;
    left: 55px;
    width: 160px;
    height: 160px;
    border: 1px solid #313173;
    overflow: hidden;
    [COLOR=Blue]text-align: center;[/COLOR]/*center the image*/
} {
    [COLOR=Blue]margin: 0 -999em;[/COLOR]

These images cannot be resized into thumbs, well, I guess I’m too lazy to do it in PHP

There is a reason for making thumbnails, you may already know it but I will reaffirm it. When you resize an image in the html like that you are still forcing the visitor to download the 2048px x 1536px version of it. Even in this day and age there are still people in rural areas that have dial up connections because they do not have access to high speed cable. The thumbnail gives the user the choice of whether or not they want to view the larger version. Without thumbnails, several images that size would bog your site down to a crawl and force many visitors to leave.

You can still use that method to scale and center images but at least go ahead and make some thumbnails at 60px height and give ALL your visitors a usable site. :wink:

Thanks Ray, I was having trouble visualising what was needed :slight_smile:

I too gave up this thread trying to understand what OP was after.
Then came Ray to rescue. :slight_smile:

I guess I just needed to explain a little clearer, I wasn’t sure how to.

No worries, I hope Ray has sorted you out ok now though.

Thanks, it worked as you pointed out.