Javascript 与flexbox相同高度的图像

我正在尝试使用flexbox获得相同大小的图像。我给出了一个

显示：flex到my
slick track
集装箱，然后
flex:1 0 auto
到my
img
。我想如果
1
的
flex grow
太小，我的图像会增加，但这并没有发生



$（“.image carousel”）.slick({
//自动播放：对，
点：是的，
幻灯片放映：3，
});
。光滑的轨道{
显示器：flex；
}
.光滑的轨道.光滑的滑轨{
弹性：10自动；
对齐项目：居中；
证明内容：中心；
}

基因
奇米
瑟沃
craped-Science.jpg
奥迪
星的
爱因斯坦
基因
奇米
瑟沃
craped-Science.jpg
奥迪
星的
请记住，flex属性仅在父级和子级之间工作

您在
上有
显示：flex
。平滑轨迹
。这意味着flex等高功能（
对齐项目：拉伸
）将应用于子元素（
.slick slide
）

这些子元素（弹性项）实际上是等高的–一旦您删除它们上的
height:100%
，就会覆盖等高功能


您的
img
元素是flex容器的后代，但不是子元素，因此它们无法识别flex属性。您需要使每个父对象都成为一个flex容器，以使图像达到全高

这里还有另一个选项，保持幻灯片中的每个图像的比例并居中。除非您使用
背景图像
，否则这可能与它得到的效果一样好，这在安装容器内部时更加灵活

我建议您限制滑块（主容器）的宽度，这样幻灯片，我指的是图片，就不会那么大了

然后将您提供给img的参数移动到其父元素

.slick-track {
    display: flex;
}
.slick-slide {
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
}
.slick-slide img {
    width: 100%;
}
.elementor-image-carousel-caption {
    text-align: center; /* just for aesthetics */
}

希望有帮助。
背景图像
是一个不错的选择，比
img
标签更灵活。