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

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

我尝试添加高度属性，例如:

.单图{ ... 高度:405px；

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

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

Answer 1

你还需要设置.img-wrap的height

.single-image{
  border: 1px solid orange;
  width: 100%;
  text-align: center;
  margin: 0px 0px 15px 0px;
  float: right;
  height: 405px;
}

.img-wrap{
  padding-bottom: 50px;
  padding-top: 25px;
  height:250px;
  overflow:hidden;
}