如何在容器内拉伸小图像，保持其纵横比？

Question

我们说我有一个100x100的容器，它将通过javascript填充不同的图像。 如果第一张图像是例如25x50，我想在以50x100为中心的容器内显示它。 另一张图片可能是50x25，但必须以100x50显示。 制作宽度= 100％且高度= 100％的CSS会将所有图像渲染为100x100。 我怎么能用CSS做到这一点？

.container
{
    width: 100px;
    height:100px;
}

.image
{
    max-height:100px;
    max-width:100px;
    position: relative;
}

Answer 1

将图像设置为背景图像并使用background-size: cover;

另一种选择是检查图像的哪一侧较长并在该侧设置为100％而另一侧设置为自动。

Determining image file size + dimensions via Javascript?