在旋转木马中设置图像的等高

Question

我正在使用react-elastic-carousel，并试图强制所有图像都具有相同的高度。但是，如果我设置宽度100%，那么高度都是不同的。如何在不挤压或拉伸图像的情况下确保所有图像的高度相同？

轮播的当前状态：link

Answer 1

我试过这个：

.rec-item-wrapper {
  height: 100%;
  width: auto !important;
}

.slideImage {
  max-height: 310px; //This was the max-height already set
  width: auto;
}

我还在学习CSS，但我希望它能有所帮助。

Answer 2

您可以向.slideImage添加一个固定的高度(例如：height: 200px;)并添加object-fit: cover，这样图像就不会拉伸并填满整个空间。

Codesandbox