在cardview中限制图片，标题和故事高度 [英] Limit image, title, and story height in cardview

问题描述

我从

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

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

  .card-img-top {
 height：25％; 
} 
  

但这似乎没有任何作用。

任何人都可以提出建议吗？如果可能的话，我宁愿不必进入sass，因为我没有经验。

编辑：完整的代码在这里： https://github.com/JefPatat/ProjectX

解决方案

使用简单的html：

 < div class =row> 
< div class =image> 
< img src => 
< / div> 
< div class =title> 
这是最简单的
< / 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 practitation ullamco labouris nisi u 
< / div> 
< / div> 
  

你可以使用这个CSS：

  .row {/ * ------这是你的专栏 -  * / 
 height：600px; / * ------列的高度 -  * / 
 width：200px; / * ------列的宽度 -  * / 
 border：1px纯黑色; / * ------基本风格 -  * / 
 float：left; / * ------ layout  -  * / 
 margin-right：10px; / * ------基本风格 -  * / 
溢出：隐藏; / * ------避免文本的其余部分溢出 -  * / 
} 
 .image {
 height：25％; / * --- ---固定高度 -  * / 
位置：相对; / * ------需要用下面的代码调整图像 -  * / 
} 
 .image img {
 position：absolute; 
 top：0; 
剩下：0; 
 right：0; 
 bottom：0; 
 margin：auto; 
最大宽度：100％; 
 max-height：100％; / * ------所有这些img属性将以图片为中心，保持纵横比 -  * / 
} 
 .title {
 font-size：16px; / * ------ style  -  * / 
 color：blue; / * ------ style  -  * / 
 max-height：25％ ; / * ------所以，正如你所说，容器的最大25％ -  * / 
溢出：隐藏; / * ------修剪文本如果高度超过25％ -  * / 
} 
 .txt {
不需要任何特别的东西，只是样式。将采取其余的高度avalaible 
} 
  

举个例子：

* {box-sizing：border-box;}。row {height：600px;宽度：200像素;边框：1px纯黑色;向左飘浮;保证金权：10px的; overflow：hidden;}。image {height：25％;位置：相对; } .image img {position：absolute;顶部：0;左：0;右：0;底部：0;保证金：汽车;最大宽度：100％; max-height：100％;}。title {font-size：16px;颜色：蓝色;最大高度：25％; overflow：hidden;} .txt {}

< div类= 行 > < div class =image> < img src =http://html.crunchpress.com/tulip/images/blog/blog-img-3.jpgalt => < / DIV> < div class =title>这是短小的< / div> < div class =txt> Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。如果您想要使用此功能，请按以下步骤操作：

< / div>< div class =row> < div class =image> < img src =http://www.imgworlds.com/wp-content/themes/IMG/img/phase3/welcome/hulk.pngalt => < / DIV> < div class =title>这是最好的，这是最好的，这是长期的，这是长期的，这是长期的，这是长期的，这是长期的，这是长期的，这是长期的，这是长期的，这是长期的，长期的，gthis是如果长期以来，这是最重要的，这是长期的，这是长久以来的事情< / div> < div class =txt> Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magnre magna aliqua。请将您的评论发送给我们，我们会尽快为您解答。 Duis aute irure dolor in renhenderit 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。请将您的评论发送给我们，我们会尽快为您解答。 Duis aute irure dolor in renhenderit 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>

以下第一条评论编辑

好的。为了适应您的纯粹引导，我为您制作了 FIDDLE 注意，我只是粘贴这个HTML INSIDEportfolio-item容器：

 < div class =image> 
< img src => 
< / div> 
< div class =title> 
这是最简单的
< / 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 practitation ullamco labouris nisi u 
< / div> 
  

这张CSS在css表格的末尾：

  .row {
 height：800px; 
} 
 .portfolio-item {
 height：100％; 
} 
 .image {
 height：25％; 
职位：亲属; 
} 
 .image img {
 position：absolute; 
 top：0; 
剩下：0; 
 right：0; 
 bottom：0; 
 margin：auto; 
最大宽度：100％; 
最大高度：100％; 
} 
 .title {
 font-size：16px; 
颜色：蓝色; 
最高身高：25％; 
 overflow：hidden; 
} 
  

Carefull作为css类'row'和'portfolio-item'来自bootstrap所以你可以修改所有的项目。更好地添加您的opwn类与上面的属性。

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.

这篇关于在cardview中限制图片，标题和故事高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！