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

1
votes

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?

8
phphtmlimage

8 Answers

2
votes

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
1
votes

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>
0
votes

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.

0
votes

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>
0
votes

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});
});
});
-1
votes

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

-1
votes

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.

-1
votes

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.