CODEWITHSUNDEEP
htmlcssimageresponsive-designimage-resizing
Nearpoint
Nearpoint

Reputation: 7362

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

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

Upvotes: 6

Views: 29967

Answers (2)

davidpauljunior
davidpauljunior

Reputation: 8338

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.

Upvotes: 18

sheng
sheng

Reputation: 1372

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

Upvotes: 4

Related Questions