如何在不调整图像大小的情况下将图像置于指定区域的中心？

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

我想在一个区域中居中图像,而不是调整大小......我正在使用HTML。

Example:

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

我有一个图像如何在不调整图像大小的情况下将图像置于指定区域的中心？ - 图像实际上是64x64。它显示完美。

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 $%^&.

现在,我有另一个图像如何在不调整图像大小的情况下将图像置于指定区域的中心？然而,图像没有它应该的那么大,它的32x32 - 这里发生的是它调整图像的大小至64x64并使其看起来像$%^&。

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

如何使图像小于“img”区域中心所需的宽度和高度,而不进行任何大小调整?

9 个解决方案

#1

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:

对于样式(在外部样式表中,natch),你会申请:

/* 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

这适用于尺寸<= 64x64px的图像,并且可以轻松修改以适应更大的图片。这里的关键要素是

set dimensions on the div

在div上设置尺寸

display as a table-cell (allows vertical align)

显示为表格单元格(允许垂直对齐)

vertical align (aligns on the Y-axis w/out weird hacks)

垂直对齐(在Y轴上与奇怪的黑客对齐)

display:block on the img element

display:阻塞img元素

margin: auto centers the image laterally

margin:auto横向居中图像

#2

Solution without IE-unfriendly display:table-cell:

没有IE不友好显示的解决方案: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>

#3

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.

您可以尝试将图像放在64x64的DIV中,而不是指定图像尺寸。然后你可以设置div的样式,使其内容居中,并隐藏任何溢出。

#4

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

您可以使用getimagesize()php函数动态获取图像大小:

<?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>

#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.

我不得不做36x36图像类似的事情。用户可以上传任何尺寸,但缩略图只显示36平方像素的中心。

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

#6

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.

我曾经使用的解决方案:添加一个单行的表,sincle单元格。将它的宽度和高度设置为64,设置无边框,没有间距,没有填充,并使其对齐并旋转到中心。将您的图像放在此表格的单元格中。

#7

The solution is a simple bit of CSS + HMTL

解决方案是简单的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

transparentpixel.gif是一个简单的1x1px透明gif图像

#8

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:

具有宽度和高度属性的img标记表示“将图像拉伸或缩小到此大小,而不管其实际大小”。使用类似的东西:

<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.

并且我不知道为什么text-align会起作用,但在我的经验中似乎。

#9

Use CSS to render the image using background:

使用CSS使用背景渲染图像:

<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.

这将在中心显示图像,而不缩放图像。

#1