CSS - 如何缩放图像并保持纵横比？

Question

我有一张图片

<div class="frame-2">
    <img class="police" alt="police" src="img/police.png">
</div>

我想将它缩放到约50％，但我不想缩小图像。

@keyframes house {
0% {
    transform: translateX(0px) translateY(0px);
}
100% {
    transform: translateX(-20px) translateY(-80px) scale(0.47, 0.56);
}

我用动画缩放它，它从300x250到141x141。我想保持宽高比，但只显示图像的一部分，比如缩放。