Limit image, title, and story height in cardview

I started from https://startbootstrap.com/template-overviews/4-col-portfolio/. I made some changes and got to this:

Images are provided externally and I have no control over their sizes. What I want to achieve is that all images should take 25% of the row height. Aspect ratio should be maintained so the width of the image can be decreased, the column width should remain the same. All titles should take maximum 50% (text trimmed if too long) and the remainder is filled with content text (text trimmed again).

I'm completely new to bootstrap and tried to influence the image height with by adding

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

But that doesn't seem to do anything.

Can anyone advise? If possible I would prefer to not have to go into sass for now since I have no experience with this.

Edit: the complete code is here: https://github.com/JefPatat/ProjectX

With easy html like:

<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>

you could use this CSS:

.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 
}

As an example:

* {box-sizing:border-box;}
.row {
   height:600px;
   width:200px;
   border:1px solid black;
   float:left;
   margin-right:10px;
   overflow:hidden;
}
.image {
   height:25%;
   position:relative;   
}
.image img {
   position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;    
    margin:auto;
    max-width:100%;
    max-height:100%;
}
.title {
  font-size:16px;
  color:blue;
  max-height:25%;
  overflow:hidden;
}
.txt {

}

<div class="row">
    <div class="image">
        <img src="http://html.crunchpress.com/tulip/images/blog/blog-img-3.jpg" alt="">
    </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>
<div class="row">
    <div class="image">
        <img src="http://www.imgworlds.com/wp-content/themes/IMG/img/phase3/welcome/hulk.png" alt="">
    </div>
    <div class="title">
      this is the tittle lon gthis is the tittle long this is the tittle long this is the tittle long this is the tittle lonle lon gthis is the tittle long this is the tittle long this is the tittle long this is the tittle longle lon gthis is the tittle long this is the tittle long this is the tittle long this is the tittle longg
    </div>
    <div class="txt">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnre magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laboruma aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    </div>
</div>

EDITED AFTER FIRST COMMENT BELOW

Ok. To adapt it to your pure bootstrap I make this FIDDLE for you with boostrap loaded.

notice that I just paste this html INSIDE "portfolio-item" container:

<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>

This CSS at the end of css sheet:

.row {
   height:800px;
}
.portfolio-item {
  height:100%;
}
.image {
   height:25%;
   position:relative;   
}
.image img {
   position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;    
    margin:auto;
    max-width:100%;
    max-height:100%;
}
.title {
  font-size:16px;
  color:blue;
  max-height:25%;
  overflow:hidden;
}

Carefull as css classes ´row´ and ´portfolio-item´ are from bootstrap so you may modifi all the project. Better to add your opwn class with the properties above.