如何使幻灯片中的图像具有响应性？

Question

上下文：我已经将tiny-slider.js连接到我的网站。我之所以使用它，是因为它支持“可变宽度”功能。

我的问题是：我正在创建的滑块无法剪切图像（需要“包含”而不是“覆盖”），这就是为什么我使用可变宽度功能。但是我希望滑块内的所有图像都具有相同的高度。图像均为纵向和横向。当我调整窗口/滑块的大小时，风景图像首先在肖像图像之前开始调整大小，从而创建了一个高度变化的怪异滑块。即使调整大小时，如何使所有图像的高度都相同？我只希望肖像图像在风景图像开始时就开始调整大小。

我的第一个想法只是使图像具有宽度：自动和高度：[x] vh，但是虽然确实解决了我身高变化的问题，但是当调整窗口大小时，它会导致图像扭曲和挤压在一起。我只是无法在保持正确比例的图像的同时，保持所有图像的高度相同。

我现在影响它的唯一代码（这不是tiny-slider.css的一部分）只是这些选项：

var slider = tns({
  container: '.my-class',
  items: 1,
  slideBy: '1',
  autoplay: true,
  autoWidth: true,
});

谢谢！

编辑-更多信息：我应该提一下，我已经将其连接到自定义wordpress主题，该主题中的图像可由用户更改。因此，我将无法定位特定的图像，因为这些图像可以随时更改，并且可以按任何顺序放置。