How can I vertically align images that are currently using the bootstrap 4 class img-fluid which are in columns?

Question

I am using bootstrap columns that each have an image inside of different sizes which are aligned on full screen view however when using bootstrap's class img-fluid they resize for smaller viewports but instead of being aligned between the other images vertically the smaller images end up on the top of their div column.

Is there a way to vertically align these images while the image scales down?

Here is the markup:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-2">
        <img src="http://via.placeholder.com/350x150" class="d-block img-fluid">
    </div>
    <div class="col-2">
        <img src="http://via.placeholder.com/300x150" class="d-block img-fluid">
    </div>
    <div class="col-2">
        <img src="http://via.placeholder.com/250x150" class="d-block img-fluid">
    </div>
    <div class="col-2">
        <img src="http://via.placeholder.com/200x100" class="d-block img-fluid">
    </div>
    <div class="col-2">
        <img src="http://via.placeholder.com/250x150" class="d-block img-fluid">
    </div>
    <div class="col-2">
        <img src="http://via.placeholder.com/150x150" class="d-block img-fluid">
    </div>
</div>

Answer 1

当您使用引导程序 4 时，只需align-items-center在您的row

如需更多帮助，请阅读Bootstrap4 Flex Grid

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row align-items-center">
  <div class="col-2">
    <img src="http://via.placeholder.com/350x150" class="d-block img-fluid">
  </div>
  <div class="col-2 align-items-center">
    <img src="http://via.placeholder.com/300x150" class="d-block img-fluid">
  </div>
  <div class="col-2">
    <img src="http://via.placeholder.com/250x150" class="d-block img-fluid">
  </div>
  <div class="col-2">
    <img src="http://via.placeholder.com/200x100" class="d-block img-fluid">
  </div>
  <div class="col-2">
    <img src="http://via.placeholder.com/250x150" class="d-block img-fluid">
  </div>
  <div class="col-2">
    <img src="http://via.placeholder.com/150x150" class="d-block img-fluid">
  </div>
</div>