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

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

在线编辑：

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

但它看起来并不正确，因为底部文本浮在上面的某个地方。

---

我需要一个不同类型的图像大小的解决方案。有什么想法吗？

您还需要设置

.img wrap

的

高度

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

尝试在css代码中添加这一新行

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

看起来是这样的

尝试使用flex


。单个图像{
边框：1px实心橙色；
宽度：100%；
文本对齐：居中；
显示器：flex；
弯曲方向：立柱；
身高：100%；
证明内容：之间的空间；
}
.姓名{
填充：20px 0px 0px 0px；
颜色：黑色；
高度：75px；
字号：18px；
}
.img包装{
填充底部：50px；
填充顶部：25px；
}
.第一张图片{
宽度：200px；
}
.第二幅图像{
宽度：150px；
}
.额外信息{
边框顶部：1倍纯色橙色；
对齐自我：底部；
}
.底部文本{
填充顶部：15px；
高度：50px；
字母间距：0.1米；
}            
.图像包装{
显示器：flex；
}
.单图像包裹{
身高：100%；
边缘底部：15px；
}

名称
基础知识
名称
基础知识