微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决在轮播中设置相同的图像高度

我正在使用 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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。