Html 变换居中：缩放图像

我有一个

img

，我已经通过它缩放到一半大小

transform: scale(0.5);

如上所述，结果是在图像的顶部和左侧明显可见不可见的边距/填充（等于原始图像大小的一半）。在chrome开发工具中检查生成的

img

，发现没有明显的边距或填充

如果我事先知道图像的大小，我可以设置

position:absolute

并偏移

top

和

right

值以将其定位在容器分区的中心。但是，这不适用于动态图像大小

如何使缩放后的图像在父div内居中，而无需事先知道图像大小

和片段：

#容器{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
保证金：自动；
宽度：300px；
高度：100px；
背景：#AAA；
}
#形象{
变换：缩放（.5）；
}

---

将

最大宽度：100%

添加到

#图像中

似乎使图像居中于容器内

#容器{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
保证金：自动；
宽度：300px；
高度：100px；
背景：#AAA；
}
#形象{
变换：缩放（.5）；
最大宽度：100%；
}

---

您的img元素比您的容器大

使用

而且,

transform-origin: 50% 50%;

---

如果比例为常数

0.5

您可以使用左/右

50%

和

平移（-100%，-100%）

，图像和容器的宽度和高度可以是动态的，这将起作用

#容器{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
保证金：自动；
宽度：300px；
高度：100px；
背景：#AAA；
}
#形象{
变换：缩放（.5）平移（-100%，-100%）；
位置：绝对位置；
左：50%；
最高：50%；
}

删除变换并检查缩放始终

.5

？为片段编辑干杯，因为某些原因编辑器不会显示在我的浏览器中。我已经更新了问题以包含预期结果-您的答案似乎再次缩小了图像。当您使用

最大宽度：100%

时，您将缩小容器宽度的一半（您已为其指定了固定的高度和宽度）。。。也许你应该调整比例因子…缩放是相对于图像而不是容器发生的。如果原始图像的宽度为500px，则生成的图像应为250px。在这种情况下，@NenadVracar的解决方案应该很好：）尝试了此方法，但

max width:100%

似乎再次缩小/缩放图像。不确定变换原点有什么影响。我在问题中添加了一个预期结果的屏幕截图。您的容器的宽度是300px，对吗？所以你的形象是一样的。之后，您使用的比例（.5）正好是父容器的一半。因此，您的图像将是150像素宽。“变换原点”具有变换从何处开始的效果。y-x值。左上角或右下角或中间等。请参见此处：提供的图像宽度为500，变换：比例（0.5）使其为250px，而不是150px。

transform-origin: 50% 50%;