Html 限制cardview中的图像、标题和故事高度

我从一开始。我做了一些改变，并做到了这一点：

图像是外部提供的，我无法控制它们的大小。我想要实现的是，所有图像都应该占行高的25%。纵横比应该保持不变，这样图像的宽度可以减小，列宽应该保持不变。所有标题的最大值应为50%（如果太长，文本将被修剪），剩余部分将填充内容文本（再次修剪文本）

我对bootstrap完全陌生，并试图通过添加

.card-img-top {
  height: 25%; 
}

但这似乎没有任何作用

有人能提供建议吗？如果可能的话，我希望现在不必进入sass，因为我没有这方面的经验

编辑：完整的代码在这里：

使用easy html，如：

<div class="row">
    <div class="image">
        <img src="">
    </div>
    <div class="title">
       this is the tittle short
    </div>
    <div class="txt">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi u
    </div>
</div>

例如：

*{框大小：边框框；}
.行{
高度：600px；
宽度：200px；
边框：1px纯黑；
浮动：左；
右边距：10px；
溢出：隐藏；
}
.形象{
身高：25%；
位置：相对位置；
}
.图像img{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
保证金：自动；
最大宽度：100%；
最大高度：100%；
}
.头衔{
字体大小：16px；
颜色：蓝色；
最高高度：25%；
溢出：隐藏；
}
.txt{
}

这是简短的标题
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，我们必须尽可能少地进行实验
这是山雀长这是山雀长这是山雀长这是山雀长这是山雀长这是山雀长这是山雀长这是山雀长这是山雀长这是山雀长这是山雀长这是山雀长这是山雀长这是山雀长这是山雀长这是山雀长
知识是一种美德，是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除了偶尔的疏忽之外，不应该因为疏忽而导致动物死亡。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除了偶尔出于谨慎，还必须为动物的劳动负责

如果所有图像占据行高的25%，如果它们的纵横比不同，您将得到失真。请编辑文章以澄清。应保持APEC比率，并可减小图像的宽度？或者列宽？图像的宽度，因此图像可以变得比列宽小。再次编辑这个问题，我讨厌它在我脑海里清晰，但我的问题不是。很抱歉。下面的Alvaro解决方案看起来很完美？我会尝试用你的答案解决一些问题，但我还不能接受，因为我不确定如何将其应用到引导部分。编辑了我的答案。粗体文本后检查。非常感谢您的输入。我要调查一下。

.row {/*------This is your column-*/
   height:600px; /*------The height of your columns-*/
   width:200px; /*------The width of your columns-*/
   border:1px solid black; /*------basic style-*/
   float:left; /*------layout-*/
   margin-right:10px; /*------basic style-*/
   overflow:hidden; /*------to avoid the rest of your text, if long, to overflow-*/
}
.image {
   height:25%;/*------Fixed height-*/
   position:relative;  /*------needed to adapt the image with code below-*/ 
}
.image img {
   position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;    
    margin:auto;
    max-width:100%;
    max-height:100%;/*------all this img properties will center the image whatever size, keeping aspect ratio-*/
}
.title {
  font-size:16px;/*------style-*/ 
  color:blue;/*------style-*/ 
  max-height:25%;/*------So, as you said, max 25% of container-*/ 
  overflow:hidden;/*------trimming text if more than 25% height-*/
}
.txt {
does not requiered anything special but styles. Will take the rest of the height avalaible 
}