Bootstrap4：在媒体列表中对齐图像

Question

我尝试使用media list的Bootstrap 4示例，图像尺寸为96x96px（固定）。只要图像是正方形的，这就可以正常工作。一旦图片宽于高度（例如96x72），反之亦然（例如49x96），该示例将无法解决。这些图像要么没有垂直居中（第一幅图像），要么它们没有对齐到col的中间（第二幅图像），并且没有填满整个列。

我尝试遵循.mx-auto d-block或text-align:center的几个示例，但没有一个按要求工作。

注意：我按照img-thumbnail中的建议放置了图像，但这也没有任何效果。 ==>

如何正确制作媒体列表，以便Bootstrap 4中的给定示例在没有 square 图像的情况下也能正常工作。

Answer 1

您可以用div包裹图像，将div设置为flex-box，以便可以轻松地将图像放置在内部，并通过调整media-body属性以实现div和.flex的比例你想要的。

<div class="media">
    <div class="media-image-holder">
        <img />
    </div>
    <div class="media-body row">
        ...
    </div>
</div>

样式：

/* holder of media-image has fixed width of 96x96px */
.media .media-image-holder {
    margin-right: 10px; /* spacing to the next component */
    flex: 0 0 96px;     /* fixed size with 96x96 px     */

    /* in order to center the image */
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}
.media .media-body {
    margin-right: 0px;
}

我不知道您是否希望图像流畅。如果这样做，您只需要向他们添加.img-fluid类。

编辑：已针对96x96px的固定大小进行了更新，并更改了媒体主体的样式，使其末尾具有适当的边距。

小提琴： http://jsfiddle.net/aq9Laaew/125395/