变换：比例尊重旧的高度和宽度

Question

好吧所以我有一些我希望并排放置的图像，但是我需要使用比例来缩小它们，因为还有其他属性（这里没有显示）需要缩小整个图像。问题是，当我去缩小图像时，它们仍然尊重它们的旧高度和宽度。即使你检查它们，它也会显示正确的尺寸，但我的照片之间只有白色空间。 这是HTML

<div class="images">
  <img class="image-scaled" src="http://fillmurray.com/200/300" alt="">
  <img class="image-scaled" src="http://fillmurray.com/200/300" alt="">
  <img class="image-scaled" src="http://fillmurray.com/200/300" alt="">
</div>

这是CSS

.images {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.image-scaled {
  transform: scale(.5);
}

这是小提琴 https://jsfiddle.net/justcald/t3teud7f/1/

我想要的是将所有图像居中，这样两边都是触摸的，没有那么多的空白区域。但我似乎无法解决任何问题。