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 blueish picture above. The picture scales within its div by applying max width and heigh of 100%. But the logo images do not scale in the same way and overflow the div.

Here is a live example: http://feroze.org/new-education/ - try resizing and see what I mean

Here is the css for the logos container div gray bar

#partners
  height 105px
  background-color #eee
  white-space nowrap
  width 100%

and here is the css applied to the logo images themselves

.logo-image
  vertical-align middle
  padding 13px
  max-width 100%
  display inline

As you can see I aligned them vertically in the grey bar. But as the bar shortens I want the images to stay within the div and resize according to the container div.

Any help would be greatly appreciated! Thanks

screenshot of logo overflow

mind sharing website URL or creating a Fiddle? – Lucky Soni Nov 10 '13 at 23:35 — Lucky Soni, Nov 10 '13 at 23:35

score 17 · Accepted Answer · edited Nov 18 '14 at 01:59

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.

OMG! Thanks so much, I was playing around with this for sometime and I couldn't get it but this worked flawlessly! I am so happy thank you very much. I searched stack overflow many times and I couldn't find a a question or answer that resolved this problem. Your the best, if I could upvote multiple times I would thanks — Nearpoint, Nov 11 '13 at 00:09
ah although this doesnt work in firefox. Do you know a fix for firefox? — Nearpoint, Nov 11 '13 at 07:52
I figured it out in firefox. just needed to add width 100% to .logo-image img See this question: http://stackoverflow.com/questions/14970591/resize-image-to-fit-div-works-but-not-in-firefox — Nearpoint, Nov 11 '13 at 08:19

score 3 · Answer 2 · answered Nov 11 '13 at 00:17

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);

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

2 Answers2

Linked