不同列内等高图像

Question

我有4列，在每列中有一个图像和一个文本部分。每一列的图像高度/宽度是不同的。每个列的文本长度是不同的。我希望图像都是相同的高度和宽度与图像本身成比例。另外，我希望文本从每个列的相同垂直点开始。

我想要的：

​

我得到的是：

​

<div class="container">
    <div class="row">
        <div class="col text-justify">
            <img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/500x150">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam odio ipsum, lobortis eu neque id, pharetra tempus lorem. Nulla a dui ornare, facilisis augue eu, blandit massa. Praesent eget congue est. Integer ut pulvinar eros. </p>
        </div>
        <div class="col text-justify">
            <img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/350x80">
            <p>In hac habitasse platea dictumst. Etiam feugiat orci non placerat egestas. Suspendisse a lacinia nisl. Sed nec lorem at mauris eleifend sagittis. Etiam pulvinar, ante in viverra semper, tortor risus elementum arcu, nec hendrerit magna ex eu turpis. Nulla pretium posuere tortor, in tincidunt odio rhoncus et. Vivamus molestie nulla non metus sodales feugiat. Duis rhoncus ullamcorper iaculis. Donec ut ullamcorper quam, at vestibulum mauris.</p>
        </div>
        <div class="col text-justify">
            <img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/500x80">
            <p>Etiam feugiat in nulla sit amet congue. </p>
        </div>
        <div class="col text-justify">
            <img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/350x150">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam odio ipsum, lobortis eu neque id, pharetra tempus lorem. Nulla a dui ornare, facilisis augue eu, blandit massa. Praesent eget congue est. Integer ut pulvinar eros. </p>
        </div>
    </div><!-- end -row -->
</div>

Codepen：https://codepen.io/danielgetsthis/full/mXepew

Answer 1

我不知道这是不是你想要的，但是请运行这个片段并告诉我(如果你在全屏打开这个片段可能会更好，因为这里的窗口太小了)

​

.img-fluid{
  width: 75%; 
  min-height: 50px;
  margin: auto;
  margin-bottom: 10px;
  display: block;  
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row">
  <div class="col text-justify">
    <img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/500x150">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam odio ipsum, lobortis eu neque id, pharetra tempus lorem. Nulla a dui ornare, facilisis augue eu, blandit massa. Praesent eget congue est. Integer ut pulvinar eros. </p>
  </div>
  <div class="col text-justify">
    <img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/350x80">
    <p>In hac habitasse platea dictumst. Etiam feugiat orci non placerat egestas. Suspendisse a lacinia nisl. Sed nec lorem at mauris eleifend sagittis. Etiam pulvinar, ante in viverra semper, tortor risus elementum arcu, nec hendrerit magna ex eu turpis. Nulla pretium posuere tortor, in tincidunt odio rhoncus et. Vivamus molestie nulla non metus sodales feugiat. Duis rhoncus ullamcorper iaculis. Donec ut ullamcorper quam, at vestibulum mauris.</p>
  </div>
  <div class="col text-justify">
    <img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/500x80">
    <p>Etiam feugiat in nulla sit amet congue. </p>
  </div>
  <div class="col text-justify">
    <img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/350x150">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam odio ipsum, lobortis eu neque id, pharetra tempus lorem. Nulla a dui ornare, facilisis augue eu, blandit massa. Praesent eget congue est. Integer ut pulvinar eros. </p>
  </div>
</div><!-- end -row -->
  </div

​