首页 > 解决方案 > 列内相等的图像高度

问题描述

我正在尝试将一些图像放在两列中。左栏中有一张图像,右栏中有两张图像。右列中的两个图像应与左侧图像具有相同的高度。我怎样才能做到这一点?

截屏

<div class="container">
    <div class="row">
      <div class="col-md-9">
        <img class="img-responsive" src="img/2.jpg" alt="">
      </div>
      <div class="col-md-3">
          <img class="img-responsive" src="img/4.jpg" alt="">

      </div>
      <div class="col-md-3">
          <img class="img-responsive" src="img/4.jpg" alt="">

      </div>
    </div>
</div>

.hero-header{
  position: relative;
}

.hero-headline {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

标签: htmlcsstwitter-bootstrap-3

解决方案


只需使用您已经创建的类img-responsive并设置height:100%或您正在寻找的任何数字。像这样,所有图像肯定会有相同的高度。


推荐阅读