Question

我正在使用PHP脚本按比例自动调整图片大小以适应给定的高度和宽度（例如：原始图片为200x100px，目标框为180x180px，调整大小的图片为180x90px）。

它运行正常但是用于将图像置于div内部的常用CSS技巧似乎要求您提前知道尺寸。

我找到的唯一解决方法是将外部div定义为display:table;，将包含图像的div定义为display: table-cell;vertical-align: middle;text-align:center;。

还有其他办法吗？

Answer 1

不是最佳练习文本 - 对齐以对齐图像。

“text-align属性的一个棘手的问题是你只能将文本与它对齐 - 你不能用它来移动像图像这样的块级元素。有些浏览器会将图像或表格与这个属性对齐，但是正如你所发现的那样，它不可靠。“ - Jennifer Kyrnin, About.com

您可以使用弃用的img属性align =“center”，虽然您不会使用。这种方式标签和样式是混合的，并且，为了恶化，整个图像周围有垂直和水平空间。
```
<img src="http://www.lorempixel.com/100/150" align="center"> <-- Wrong way
```
解决此问题的最佳方法是使用css。将图像设置为div的背景，然后div的空间将是图像的空间，您可以使用边距将其放置到位。您可以尝试使用其他技巧之一CSS Tricks's Absolute center an image

CSS background-image技术：

background:url('path_to_img') center center no-repeat; /* div center */
background:url('path_to_img') center 0      no-repeat; /* div horizontal center */
background:url('path_to_img') 0      center no-repeat; /* div vertical center */

Answer 2

如果您需要使用img标记，并且不想使用背景图像混淆div，可以尝试以下方法：

http://jsfiddle.net/Nz6Nm/3/

.container
{
    width: 180px;
    height: 180px;
    background-color: #FF0000;
    line-height: 180px;
    font-size: 0;
    text-align: center;
}
.container img {
    vertical-align: middle;
}

font-size设置为0以避免奇怪的间距。如果行高等于容器的高度，则会导致vertical-align作为垂直中心，至少对于图像而言。

这样做的好处是，您可以将图像放在img标签中，这比背景图像在语义上更令人愉悦。如果您有一个已知的容器大小，但是您想要居中的未知图像大小，则此方法有效。

修改：这是指向另一个小提琴的链接：http://jsfiddle.net/Nz6Nm/4/

你提到可能需要在文字上方放置文字，所以我只是想这样快速地展示它。这样可以在顶部增加20px。如果您需要坚持180 x 180，那么您可以调整逻辑以适应。

以动态大小的图像为中心

2 个答案: