Javascript 卡和img上的高度相同

我试着用卡片制作猫头鹰旋转木马。我需要帮忙做两件事。首先，如何在每张卡上将img裁剪成相同的大小并将其居中。第二件事是如何制作所有高度相同的卡片。我尝试了很多东西，但都没有效果，不知道是否有任何与猫头鹰旋转木马css冲突或问题是在我

.cards{
宽度：100%；
}
a{
文字装饰：无；
颜色：黑色；
}
h1{
填充：1rem；
}
p{
填充：0 1rem；
}
.卡片{
高度：500px；
位置：相对位置；
边框：1px纯色灰色；
边界顶部：无；
边界半径：20px；
光标：指针；
溢出：隐藏；
}
img.img_幻灯片{
宽度：100%；
高度：自动；
}
钮扣{
边界：无；
光标：指针；
文本对齐：居中；
文字装饰：无；
填充：10px 25px；
边界半径：30px；
背景色：#27ae60；
颜色：#fff；
位置：绝对位置；
底部：2%；
右：5%；
}
@仅介质屏幕和（最大宽度：450px）{
h1{
字体大小：1.5rem；
填充：.3rem；
}
p{
填充：.3rem；
单词包装：打断单词；
}
.卡片{
高度：400px；
}
}

$（'.owl carousel'）。owl carousel({
循环：对，
差额：40，
回答：是的，
响应：{
0:{
项目：1.2，
导航：错，
差额：10
},
600:{
项目：2.2，
导航：错
},
900:{
项目：3.5，
导航：错
},
1500:{
项目：4，
导航：错
},
1700:{
项目：4，
导航：错，
保证金：100
}
}
})

好首先，我最喜欢的创建易于缩放图像的方法是执行以下操作：

HTML:

<div class="thumbnail"></div>

.thumbnail {
    padding-top: 100%; // - This will create a square. 1:1
    background: red;
}

现在，您有了一个很好的纵横比可缩放图像，现在是时候进入卡片了。您可能需要破译其中的一些内容，但它应该可以相对正常地工作

.row{
显示：-ms flexbox；
显示器：flex；
-ms-flex-wrap:wrap；
柔性包装：包装；
}
.缩略图{
垫面：50%；
宽度：100%；
背景：红色；
}
.卡片{
弹性基准：25%；
边框：1px实心#ccc；
显示：-ms flexbox；
显示器：flex；
-ms-flex方向：列；
弯曲方向：立柱；
}
.内容{
边缘底部：1米；
}
.btn{
页边顶部：自动；
显示：块；
}

我有些满足！
我还有一些内容，


它跨越多条线。
我还有一些内容，


它跨越多条线。

要裁剪图像，请使用具有固定大小的

和

背景图像

属性。要进行微调，请使用

背景大小

和

背景位置

。但是你会遇到第二张图像的问题，你需要调整位置来正确显示文本。同样，为文本使用固定高度的容器，并制作

悬停效果

，

滚动条

或

阅读更多链接

，以确保所有内容都是可读的注意：没有CSS方法来均衡不共享父元素的元素的高度。