物体适合度和高度

Question

我正在尝试编写基于浏览器维度“包含”或“覆盖”图像的代码。一切都按预期工作，但如果窗口的高度小于宽度，即使使用包含图像也会被裁剪。

我有以下CSS代码：

.object-fit_cover { object-fit: cover; width:100%; height:auto;}
.object-fit_contain { object-fit: contain; max-width:100%; height:auto; }

我的HTML代码显示图片

<img  ng-src="<myimage>" ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" />

当高度大于宽度时 - 事情是完美的，就像这样：

但是，当我将宽度拉伸到大于高度时，它会裁剪图像，即使我切换到object-fit：contains

我真正想要的是，如果我使用class =“object-fit_cover”，那么图像应该填满窗口，如果我切换到使用class =“object-fit_contain”，那么图像应该始终显示 - 在上面我看到的第二个例子中没有发生这种情况。

由于