Begrenzen Sie Bild, Titel und Geschichte Höhe in Cardview

Question

Ich begann von https://startbootstrap.com/template-overviews/4-col-portfolio/. Ich habe einige Änderungen und bekam dazu:

Bilder werden zur Verfügung gestellt von außen, und ich habe keine Kontrolle über ihre Größen. Ich möchte erreichen, dass alle Bilder 25% der Zeilenhöhe einnehmen. Das Seitenverhältnis sollte beibehalten werden, so dass die Breite des Bildes verringert werden kann, die Spaltenbreite sollte gleich bleiben. Alle Titel sollten maximal 50% (Text abgeschnitten, wenn zu lang) und der Rest wird mit Inhalt Text (Text wieder getrimmt).

bin ich völlig neues Bootstrap und versuchte, mit der Bildhöhe zu beeinflussen durch Zugabe

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

Aber das scheint nicht, etwas zu tun.

Kann jemand beraten? Wenn es mir möglich ist, würde ich es vorziehen, jetzt nicht erst einmal in den sauren Apfel zu schauen, da ich keine Erfahrung damit habe.

Edit: der vollständige Code ist hier: https://github.com/JefPatat/ProjectX

Answer 1

Mit einfachem html wie:

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

Sie das CSS verwenden:

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

Als Beispiel:

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

NACH DER ERSTEN KOMMENTAR EDITED BELOW

Ok. Um es an Ihren puren Bootstrap anzupassen, mache ich dieses FIDDLE für Sie mit boostrap geladen.

Mitteilung, die ich gerade diesen HTML einfügen 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> 

Diese CSS am Ende des CSS-Blatt:

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

Care als CSS-Klassen'row' und 'portfolio-item' stammt vom Bootstrap, so dass Sie das gesamte Projekt modifizieren können. Es ist besser, die gewünschte Klasse mit den obigen Eigenschaften hinzuzufügen.