How can I make images in a row not condense to fit smaller resolutions?

Question

Not using Bootstrap or the like, I have a series of images in a row with a total max-width: 1280px; and min-width:1280px; (all the images add up to 1280px). But on computers with a lower resolution then 1280, the images wont all stay in a line, some will drop to the next line to fit the screen. I understand keeping them in a line will force the page off to the left requiring sideways scrolling, but to me that is preferable to condensing.

I know this is a newbie question but if anyone could help me out or offer a solid alternative that a newbie can pull off rather easily, that would be appreciated.

Answer 1

You can set the image widths in percent, so they will always fill up the parent elements width:

.wrapper { max-width: 1280px; }
.wrapper img { width: 10%; } /* 10 images in a row */

And if you want the horizontal-scrollbars version, use width instead of max-width:

.wrapper { width: 1280px; }

Answer 2

Add white-space: nowrap; to the element that contains the images.