CSS：无间隙地将图像缩放到50%

这应该是相当简单的，但我得到@2x图像（两倍于视网膜的大小）为我的网站，我需要缩放他们如何为网站的50%。我最初试过

height:50%;
width:auto;

但它将其缩小到容器大小的一半。然后我试着

transform: scale(0.5)

这是可行的，但在图像上方和下方留下了巨大的间隙（图像原始大小的差异）

---

以一半大小显示图像而不引起视觉问题的最佳方式是什么。

您可以使用translateX和translateY来删除gup

transform:scale（0.5）translateX（-50%）translateY（-50%）

---

参见示例：

谢谢！一旦我移除transformX，它就像一个符咒！