php 如何在不调整图像大小的情况下将图像居中放置在指定区域？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1049558/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you center an image in a specified area, without resizing the image?
提问by MichaelICE
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.
我有一个图像 <img src='img1.png' width='64' height='64'> - 该图像实际上是 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 $%^&.
现在，我有另一个图像 <img src='img2.png' width='64' height='64'> 然而，图像没有它应该的那么大，它的 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”区域为中心的所需宽度和高度？
回答by Alex Mcp
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
- 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
- 在 div 上设置尺寸
- 显示为表格单元格（允许垂直对齐）
- 垂直对齐（在 Y 轴上对齐，没有奇怪的技巧）
- display:block 在 img 元素上
- 边距：自动横向居中图像
回答by Kornel
Solution without IE-unfriendly display:table-cell:
没有 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>
回答by Lawrence Barsanti
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 的样式，使其内容居中并隐藏任何溢出。
回答by Julien Poulin
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>
回答by Mark Hurd
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:
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:
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});
});
});
回答by Ramuns Usovs
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 图像
回答by Jon Benedicto
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.
这将在中心显示图像，而不缩放它。
回答by Dave Archer
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 会起作用，但在我的经验中似乎是这样。
