Bootstrap 4：在媒体列表中对齐图像

Question

我尝试按照 Bootstrap 4 的示例获取 media list 的图像大小为 96x96px（固定）。只要图像是正方形的，它就可以正常工作。一旦图像比高度更宽（例如 96x72）或反之亦然（例如 49x96），该示例就无法运行。图像没有垂直居中（第一张图像），或者它们没有在列的中间对齐（第二张图像）并且没有填满整个列。

我尝试了几个例子，.mx-auto d-block 或 text-align:center 但它们都没有按要求工作。

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

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

Answer 1

你可以用 div 包裹你的图片，将 div 设置为 flex-box，这样你就可以轻松地将图片定位在里面，并通过调整.flex 属性来调整 div 和media-body 的比例以达到你想要的效果。

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