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.
You’ll need to clarify that a little as I got lost somewhere within your logic
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. img.center{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.
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.
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.
