чистый css способ подгонки изображений по строке

Question

Есть ли чистый способ css для создания изображений в строке в контейнере с переменным размером?

У меня есть ряд изображений, которые я хочу поместить.

Есть два способа, которыми я знаю, чтобы соответствовать изображениям в строке. Если я установил ширину изображения в процентах, то есть width: 20%, тогда, если экран широкий, изображения становятся очень большими или если изображение мало, изображения становятся очень маленькими. Если я установил изображения как абсолютную ширину, то есть width: 100px;, то изображения будут показаны с размером, который я хочу. Но контейнер не полностью заполнен, и справа от него остается незаметное пространство.

Сейчас я использую javascript для настройки процентной ширины на основе ширины экрана пользователя.

Есть ли чистый метод CSS, позволяющий контролировать способ отображения изображений таким образом, что если на экране больше изображений, вставляемых в строку, а не их раздутия, но при этом все изображения должны быть аккуратно помещены в контейнер с не осталось места.

Answer 1

Я использую медиазапросы так:

@media all and (max-width: 900px) and (min-width: 600px) 
    img 
    width 50% 

@media all and (max-width: 1050px) and (min-width: 900px) 
    img 
    width 33.3333% 

@media all and (max-width: 1280px) and (min-width: 1050px) 
    img 
    width 25% 

@media all and (max-width: 1910px) and (min-width: 1600px) 
    img 
    width 16.6667% 

Я думаю, что это лучший ответ.

Answer 2

вы можете добавить свойство float в каждый из ваших контейнеров изображений (поплавок: влево). см http://css.maxdesign.com.au/floatutorial/tutorial0407.htm