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