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

我有一个形象

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

---

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

如果要保持纵横比，为什么水平和垂直比例因子不同？还有，动画定义在哪个元素上？您的代码没有说明是div还是img。我希望在不缩小图像的情况下缩放图像。很难完全使用CSS实现您想要的功能，并且让它在所有浏览器上都能很好地工作。我建议您找到一个合适的JS库来提供上述功能。

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