Creating a simple HTML structure:
<div class="row">
<div class="image">
<img src="">
</div>
<div class="title">
this is the title 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>
Applying CSS styles to enhance the look and feel:
.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 {
does not require anything special but styling. Will take the remaining height available.
}
An example of implementing the above code:
* {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 title 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 title long this is the title long this is the title long this is the title longle lon gthis is the title long this is the title long this is the title long this is the title longle lon gthis is the title long this is the title long this is the title long this is the title 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>
UPDATED AFTER INITIAL COMMENT BELOW
To fit into your bootstrap project, simply place this code snippet inside the "portfolio-item" container:
<div class="image">
<img src="">
</div>
<div class="title">
this is the title 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>
Add these specific CSS properties at the end of your stylesheet:
.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;
}
Note that classes like ´row´ and ´portfolio-item´ are from bootstrap, so modify them according to your project for better customization.