How to get multiple images to auto resize and stay centered within a div

Question

I am trying to get the multiple university logo images in a row to scale down as the browser width gets smaller and not overflow its container div, just like I do with the b

Answer 1

There are three ways to do this:

First, you can set the max-width to 100%/number of images (in this case six). box-sizing is a new CSS attribute that contains the padding inside the width.

So you can set the padding to whatever you want, but if you have box-sizing set to border-box and a hard-coded width, the width will never change (unless you have overflow, of course).

box-sizing: border-box;
max-width: 16%;

Second, you can use the new CSS function calc(). We subtract 26px because of the 13px of padding on each side.

max-width: calc(100% / 6 - 26px);

Lastly, you can use calc() and box-sizing, preventing the need to subtract 26px.

box-sizing: border-box;
max-width: calc(100% / 6);

Answer 2

Not sure what HTML you've already got, but if the images are each wrapped inside a <div> or <li> then you can use display: table; and display: table-cell to ensure that no matter how many images, they'll always fit the width correctly.

body {
  margin: 0;
}

#partners {
  height: 105px;
  background-color: #eee;
  white-space: nowrap;
  width: 100%;
  display: table;
}

.logo-image {
  vertical-align: middle;
  padding: 13px;
  display: table-cell;
}

.logo-image img {
  max-width: 100%;
}

<div id="partners">
  <div class="logo-image">
    <img src="http://placehold.it/120x80" alt="Placeholder Image" />
  </div>
  <div class="logo-image">
    <img src="http://placehold.it/120x80" alt="Placeholder Image" />
  </div>
  <div class="logo-image">
    <img src="http://placehold.it/120x80" alt="Placeholder Image" />
  </div>
  <div class="logo-image">
    <img src="http://placehold.it/120x80" alt="Placeholder Image" />
  </div>
  <div class="logo-image">
    <img src="http://placehold.it/120x80" alt="Placeholder Image" />
  </div>
  <div class="logo-image">
    <img src="http://placehold.it/120x80" alt="Placeholder Image" />
  </div>
</div>

Working demo here.