Question

我的主要目标是拥有一个简单的框架（如您所见），文本行和图像很少。我想做的是让这个框架变得灵活。我的意思是 - 如果我更改其中的图片（更大 - >更小），框架应该改变。它应该保持固定。

在线编辑：https://www.bootply.com/Y09Zn1wir3#

HTML：

<div class="col-md-4">
  <div class="single-image-wrap">
    <div class="single-image">
      <div class="name">NAME</div>
      <div class="img-wrap">
        <img src="https://cdn.pixabay.com/photo/2013/07/12/14/07/basketball-147794_960_720.png" class="first-image">
      </div>
      <div class="extra-info">
        <div class="bottom-text">ABC</div>
      </div>
    </div>
  </div>
</div>

<div class="col-md-4">
  <div class="single-image-wrap">
    <div class="single-image">
      <div class="name">NAME</div>
      <div class="img-wrap">
        <img src="https://cdn.pixabay.com/photo/2013/07/12/14/07/basketball-147794_960_720.png" class="second-image">
      </div>
      <div class="extra-info">
        <div class="bottom-text">ABC</div>
      </div>
    </div>
  </div>
</div>

CSS：

/* CSS used here will be applied after bootstrap.css */
.single-image{
    border: 1px solid orange;
    width: 100%;
    text-align: center;
    margin: 0px 0px 15px 0px;
    float: right;
}


.name{
    padding: 20px 0px 0px 0px;
    color: black;
    height: 75px;
    font-size: 18px;
}

.img-wrap{
    padding-bottom: 50px;
    padding-top: 25px;
}

.first-image{
    width: 200px;
}

.second-image{
    width: 150px;
}

.extra-info{
    border-top: 1px solid orange;
}

.bottom-text{
    padding-top: 15px;
    height: 50px;
    letter-spacing: 0.1em;
}

我尝试将height属性添加到：

。单图像{ ... 身高：405px; }

结果：https://www.codeply.com/go/2s2hH3nbju

但它看起来不正确，因为底部文字漂浮在某处。我需要针对不同类型图像尺寸的解决方案。有什么想法吗？

Answer 1

您也需要设置height的{{1}}。

.img-wrap

Answer 2

尝试在css代码中添加此新行。

.img-wrap{
  min-height: 275px;
}

它看起来像这个

Output

Answer 3

尝试使用 flex

＆＃13;

.single-image{
    border: 1px solid orange;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}


.name{
    padding: 20px 0px 0px 0px;
    color: black;
    height: 75px;
    font-size: 18px;
}

.img-wrap{
    padding-bottom: 50px;
    padding-top: 25px;
}

.first-image{
    width: 200px;
}

.second-image{
    width: 150px;
}

.extra-info{
    border-top: 1px solid orange;
    align-self: bottom;
}

.bottom-text{
    padding-top: 15px;
    height: 50px;
    letter-spacing: 0.1em;
}            

.images-wrap{
display: flex;
}

.single-image-wrap {
    height: 100%;
    margin-bottom: 15px;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  <div class="row images-wrap">
  <div class="col-xs-6 col-md-4">
  <div class="single-image-wrap">
    <div class="single-image">
      <div class="name">NAME</div>
      <div class="img-wrap">
        <img src="https://cdn.pixabay.com/photo/2013/07/12/14/07/basketball-147794_960_720.png" class="first-image">
      </div>
      <div class="extra-info">
        <div class="bottom-text">ABC</div>
      </div>
    </div>
  </div>
</div>

<div class="col-xs-6 col-md-4">
  <div class="single-image-wrap">
    <div class="single-image">
      <div class="name">NAME</div>
      <div class="img-wrap">
        <img src="https://cdn.pixabay.com/photo/2013/07/12/14/07/basketball-147794_960_720.png" class="second-image">
      </div>
      <div class="extra-info">
        <div class="bottom-text">ABC</div>
      </div>
    </div>
  </div>
</div>
  </div>

＆＃13;

HTML - 更改框架内的图像并保持框架大小不变

3 个答案: