How do you center an image in a specified area, without resizing the image?

Question

I want to center an image in an area, without resizing... I am using HTML.

Example:

I have an image <img src='img1.png' width='64' height='64'> - the image is actually 64x64. It displays perfectly.

Now, I have another image <img src='img2.png' width='64' height='64'> however, the image is not as big as it should be, its 32x32 - what happens here is it resizes the image to 64x64 and makes it look like $%^&.

How do I make images smaller then the desired width and height centered in the 'img' area without any resizing what so ever?

Answer 1

You could try putting the image inside a DIV that is 64x64 and not specifying the image dimensions. Then you could style the div so its contents are centered and any overflow is hidden.

Answer 2

A solution I once used: Add a table with a single row, sincle cell. Set it's width and height to 64, set no borders, no spacing, no padding and make it align and valign to center. Put your image in the cell of this table.

Answer 3

You can dynamically get an image size using the getimagesize() php function:

<?php
  $size = getimagesize('imgX.png');
  $height = $size[1];
  $width = $size[0];
?>
<div style="text-align: center">
  <img src="imgX.png" width="<?php print($width) ?>" height="<?php print($height) ?>" />
</div>

Answer 4

An img tag with width and height attributes is saying "stretch or shrink the image to this size regardless of its actual size". use something like:

<div style="text-align:center;">
 <img src="x.jpg">
</div>

and no i don't know why text-align would work, but it appears to in my experience.

Answer 5

I've had to do something similar with 36x36 images. Users were able to upload any size but the thumbnails were only to show the center 36 square pixels.

Markup:

<li><div><span></span>
    <img src="_media/objects/jessica-bowman.png" alt="Jessica Bowman" /></div>
    <p><a href="#">Jessica Bowman</a></p>
</li>

The span was just there to get rounded corners on the image, it's not necessarily needed.

CSS:

ul.recent-list li div {
    position: relative;
    float: left;
    width: 36px;
    height: 36px;
    overflow: hidden;
}

ul.recent-list li div span {
    position: relative;
    z-index: 100;
    display: block;
    width: 36px;
    height: 36px;
    background: url("../_media/icons/icon-overlay.png") top left no-repeat;
}

ul.recent-list li div img {
    position: relative;
    top: -36px;
    z-index: 0;
    float: left;
}

JavaScript:

$(window).load(function() {
$("ul.recent-list div img").each(function() {
 var moveX = ($(this).width() / 2 * -1) + 18;
 var moveY = ($(this).height() / 2) * -1 - 18; // 18 is 1/2 the default offset of 36px defined in CSS
 $(this).css({'top' : moveY, 'left' : moveX});
});
});

Answer 6

The solution is a simple bit of CSS + HMTL

<img src="transparentpixel.gif" 
width="64" 
height="64" 
style="
 background-image:url('path/to/image.jpg');
 background-repeat:no-repeat;
 background-position:center center;
" />

the transparentpixel.gif is a simple 1x1px transparent gif image

Answer 7

What you will need is something like this:

<div class="box">
    <img src="whatever size image you'd like" />
</div>

And for the styling (in an external stylesheet, natch) you'd apply:

/* Image centering */
div.box {
 border: 1px black solid;
    height: 64px;
    width: 64px;
    background: #444;
 display: table-cell;
 vertical-align: middle;
}
.box img {
 display:block;
 margin: 0px auto;
}

This works for images with dimensions <= 64x64px, and is easily modifiable to work with larger pics. The key elements here are

• set dimensions on the div
• display as a table-cell (allows vertical align)
• vertical align (aligns on the Y-axis w/out weird hacks)
• display:block on the img element
• margin: auto centers the image laterally

Answer 8

Use CSS to render the image using background:

<div style="background: url(img1.png) no-repeat center center; height: 64px; width: 64px;"></div>

This will show the image in the center, without scaling it.

Answer 9

Solution without IE-unfriendly display:table-cell:

<!DOCTYPE html>
<style>
div {
  line-height:64px; /* that's the secret sauce */
  text-align:center;
  width:64px; height:64px;
}
img {vertical-align:middle}
</style>
<div><img …></div>