Bootstrap row how to center images with different width/height?

Question

I have a web page. I would like to add 6 images in a row with different width and height. I want to place those images inside border with equal margins from both sides/borders. I think I have to get the biggest image width and height and set to the others. I don't want to spread out the image outside the border.

Here is my demo page: http://s14.postimg.org/5mh3d728x/sample.png

EdiT 1: here is sample html

Here is CSS:

.thumbnailImage {
            border: 1px solid #ddd;
            border-radius: 4px;
            text-align: center;
            padding-top: 7px;
        }

EdiT 2: If I changed it to the below, images are getting bigger. I want to maintain the original image sizes.

Here is the HTML:

Here is the CSS:

.thumbnailImage {
            border: 1px solid #ddd;
            border-radius: 4px;
            text-align: center;
            padding: 7px;
        }
.thumbnailImage img {
      max-width: 100%;
      height: auto;
      min-height: 150px;
    }

Here is the screenshot:http://s21.postimg.org/gslnddahj/sample2.png

EdiT 3: I tried the javascript solution but images get bigger, not centered and div exceeds the screen.

Here is the screenshot:http://s7.postimg.org/m7mxh36qj/sample3.png

Here is the final HTML: **

**

EdiT 4: Here is the final markup and CSS. I wonder if there is a way to make images fit in one row.

The sample demo: http://s12.postimg.org/647dighkt/sample.png

HTML:

CSS:

.equal, .equal > div[class*='col-'] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex: 1 0 auto;
}
div.imgc img{
   display:block;
   margin:auto;
}

Thanks in advance & Best Regards.

Bruno J. S. Lesieur · Accepted Answer

You could try this method as exposed on

this Live Responsive Exemple

All your images will be Responsive thanks to Bootstrap .img-responsive OOCSS Class Pattern. That mean will be have the real size if your column have enought space. In Mobile, this images will be horizontaly center and each image to be displayed to a new line.

But above 992px (as you setted with md Bootstrap), the behavior you want is applied and each image will be verticaly centered into column (and each column will be have the same height).

On this HTML:

with this CSS:

.col-md-2 {
  position: relative;
  border: 1px solid #f00;
}

.img-responsive {
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 992px) {
  .img-responsive {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

Create this JavaScript function:

/**
 * Maintain the height of all object in htmlCollection.
 * @function maintainedSameHeight
 * @param  {HTMLCollection} htmlCollection - All HTMLElement need to kept the same height.
 * @param  {string}         mediaQueries   - Under what responsive condition the calcul is apply.
 */
function maintainedSameHeight(htmlCollection, mediaQueries) {
  var maxHeight = 0;

  [].forEach.call(htmlCollection, function(htmlElement) {
    htmlElement.style.height = "";
    maxHeight = (htmlElement.offsetHeight > maxHeight) ? htmlElement.offsetHeight : maxHeight;
  });

  if (!mediaQueries || window.matchMedia(mediaQueries).matches) {
    [].forEach.call(htmlCollection, function(htmlElement) {
      htmlElement.style.height = maxHeight + "px";
    });
  }
};

And apply it:

/* Create a function to apply on the `.col-md-1` already in the DOM the previous created function. */
function setHeightOnImages() {
  maintainedSameHeight(
        // Target all column you want inspect to find the most height.
        document.querySelectorAll(".col-md-2"),
        // Because under 992px, you will be have one column, there are no necessity to maintain same height in this case.
        "(min-width: 992px)"
  );
}

/* Apply at first time. */
window.addEventListener("load", setHeightOnImages);
/* And update in case of Responsive. */
window.addEventListener("resize", setHeightOnImages);

Bootstrap row how to center images with different width/height?

Answers (2)

Related Questions