居中变换：缩放图像

Question

我有img我通过缩放到一半大小;

transform: scale(0.5);

如上所述，结果是顶部和顶部显示出不可见的边缘/填充。图像左侧（相当于原始图像大小的一半）。检查chrome dev工具中生成的img表明没有明显的边距或填充。

如果我之前知道图像的大小，我可以设置position: absolute并偏移top＆amp; right值将其定位在容器div的中心。但这不适用于动态图像尺寸。

如何在父div中居中缩放图像，而无需事先了解图像大小？

codepen和摘录：

#container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 300px;
  height: 100px;
  background: #AAA;
}
#image {
  transform: scale(.5);
}

<div id="page">
  <div id="container">
    <img id="image" src="//unsplash.it/500/160?image=10" />
  </div>
</div>

预期结果;

Answer 1

如果比例为常数0.5，您可以使用左/右50%和translate(-100%, -100%)，图像和容器的宽度和高度可以是动态的，这将有效。

#container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 300px;
  height: 100px;
  background: #AAA;
}
#image {
  transform: scale(.5) translate(-100%, -100%);
  position: absolute;
  left: 50%;
  top: 50%;
}

<div id="page">
  <div id="container">
    <img id="image" src="//unsplash.it/500/160?image=10" />
  </div>
</div>

Answer 2

将max-width: 100%添加到#image似乎将图像置于容器内。

#container {
  position:absolute;
  top: 0;
  bottom:0;
  left: 0;
  right:0;
  margin: auto;
  width: 300px;
  height: 100px;
  background: #AAA;
}

#image {
  transform: scale(.5);
  max-width: 100%;
}

<div id="page">
  <div id="container">
    <img id="image" src="//unsplash.it/500/160?image=10" />
  </div>
</div>

查看并告诉我您的反馈意见。谢谢！

Answer 3

你的img元素比你的容器大。

使用;

max-width: 100%;

还有;

transform-origin: 50% 50%;