Question

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

示例：

我有一张图片＆lt; img src ='img1.png'width ='64'height ='64'＆gt; - 图像实际上是64x64。它显示得很完美。

现在，我有另一张图片＆lt; img src ='img2.png'width ='64'height ='64'＆gt;然而，图像没有它应该的那么大，它的32x32 - 这里发生的是它将图像大小调整为64x64并使其看起来像$％^＆amp;。

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

Answer 1

你需要的是这样的东西：

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

对于样式（在外部样式表中，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;
}

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

在div上设置尺寸
显示为表格单元格（允许垂直对齐）
垂直对齐（在Y轴上与奇怪的黑客对齐）
显示：阻止img元素
margin：auto横向居中图像

Answer 2

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

Answer 3

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

Answer 4

您可以使用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>

Answer 5

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

<强>标记：

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

跨度就是在图像上获得圆角，不一定需要它。

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

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

Answer 7

具有宽度和高度属性的img标记表示“无论其实际大小如何，都将图像拉伸或缩小到此大小”。使用类似的东西：

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

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

Answer 8

解决方案是一个简单的CSS + HTML

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

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

Answer 9

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

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

这将在中心显示图像，而不进行缩放。

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

9 个答案: