Question

我是从https://startbootstrap.com/template-overviews/4-col-portfolio/开始的。我做了一些改变并得到了这个：

图像是外部提供的，我无法控制它们的尺寸。我想要实现的是所有图像应占行高的25％。应保持纵横比，以便可以减小图像的宽度，列宽应保持不变。所有标题最多应占50％（文本修剪时间过长），其余标题填写内容文本（文本再次修剪）。

我是全新的bootstrap并试图通过添加

来影响图像高度

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

但这似乎没有做任何事情。

任何人都可以提供建议吗？如果可能的话，我现在不想进入sass，因为我没有这方面的经验。

修改：完整代码在此处：https://github.com/JefPatat/ProjectX

Answer 1

使用简单的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>

你可以使用这个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 
}

举个例子：

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

在以下第一次评论后被删除

确定。为了使它适应你的纯引导，我为你加载了boostrap，为你做了 FIDDLE 。

请注意，我只是粘贴了这个html INSIDE“portfolio-item”容器：

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

css表末尾的CSS：

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

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

在cardview中限制图像，标题和故事高度

1 个答案: