在轮播中设置相同的图像高度

问题描述

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

轮播的当前状态：link

解决方法

我试过了：

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

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

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

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

Codesandbox

reactjs reactjs