0

I tried to follow the example of Bootstrap 4 for a media list with images of size 96x96px (fixed). This works fine as long as the images are square. As soon as the images are more wider than height (e.g. 96x72) or vice versa (e.g. 49x96) the example does not work out. Either the images are not centered vertically (first image) or they are not aligned in the middle of the col (second image) and does not fill the entire column.

enter image description here

I tried to follow several examples, with .mx-auto d-block or text-align:center but none of them works as required.

Note: I placed the images as recommended in img-thumbnail but this does not have any effect either. ==>

How to make the media list properly so the given example from Bootstrap 4 works as well with none square images.

LeO
  • 4,238
  • 4
  • 48
  • 88

1 Answers1

1

You can wrap your images with a div, set the div as flex-box so that you can easily position the image inside, and proportion the div and media-body by adjusting .flex property to achieve what you want.

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

Styles:

/* 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;
}

I don't know if you want the images to be fluid or not. If you do, you just need to add .img-fluid class to them.

EDIT: Updated for fixed size of 96x96px and changed the style of the media-body to have proper margin at the end.

fiddle: http://jsfiddle.net/aq9Laaew/125395/

LeO
  • 4,238
  • 4
  • 48
  • 88
David Liang
  • 20,385
  • 6
  • 44
  • 70
  • First of all thx for your suggestion. It works to some extent - but not completly. If you resize the display than the container, i.e. `media-image-holder` resizes as well. But matter of fact I know the max dimensions of it (i.e. 96x96). The unwanted effect is that the width grows as well... I added `margin-right: 10px; flex: 0 0 96px;` which fixes this issue. – LeO Aug 01 '18 at 08:30
  • Should I update your suggestion above? Or any other comments? – LeO Aug 01 '18 at 08:31
  • @LeO: you can edit my post and maybe update your OP as well to state that the max dimension is 96x96? – David Liang Aug 01 '18 at 14:41
  • Thx, I've updated the OP as changed little bit the style to match my request. Seems like Bootstrap does addtional (unwanted) sizing alignments. – LeO Aug 02 '18 at 07:36