Я сделал что-то подобное для галереи изображений миниатюр Instagram, где изображение может быть меньше, чем размер миниатюры, но не больше, и миниатюры вместе занимают 100% ширины контейнера. Это так, что изображения занимают всю ширину, не растягивая их.
Вы можете получить этот эффект довольно легко, если будете использовать препроцессор CSS. Если вы не используете препроцессор CSS, тогда потребуется больше усилий.
Вот пример CodePen , который содержит ссылку на другую демонстрацию.
По сути, волшебная часть это стилус CSS:
floaterSize = 300px
.floater
max-width floaterSize
for num in (1..10)
@media screen and (min-width: floaterSize*num)
.floater
width unit(100/(num+1), '%')
Что он делает, так это то, что он вычисляет идеальную ширину для элемента с ограничением максимальной ширины, а затем добавит еще один к строке, как только этот предел будет достигнут, что приведет к плавному расположению элементов, каждый из которых не охватывает больше чем указанная максимальная ширина (в данном случае floaterSize).
Первые несколько сгенерированных выглядят так:
@media screen and (min-width: 300px) {
.floater {
width: 50%;
}
}
@media screen and (min-width: 600px) {
.floater {
width: 33.333333333333336%;
}
}
@media screen and (min-width: 900px) {
.floater {
width: 25%;
}
}
Это мобильный подход. По сути, если ваше окно 299px или меньше, вы должны увидеть 1 блок, но если оно 599px или меньше, то оно будет вмещать 2 блока, в то время как 899px будет вмещать 3 блока и т. Д. До тех пор, пока вы не захотите подняться выше. в ширину экрана. Предоставленный стилус будет писать 10 медиа-запросов, до @media screen and (min-width: 3000px).
Весь сгенерированный CSS, который предоставляет код Stylus, можно увидеть ниже.
@media screen and (min-width: 300px) {
.floater {
width: 50%;
}
}
@media screen and (min-width: 600px) {
.floater {
width: 33.333333333333336%;
}
}
@media screen and (min-width: 900px) {
.floater {
width: 25%;
}
}
@media screen and (min-width: 1200px) {
.floater {
width: 20%;
}
}
@media screen and (min-width: 1500px) {
.floater {
width: 16.666666666666668%;
}
}
@media screen and (min-width: 1800px) {
.floater {
width: 14.285714285714286%;
}
}
@media screen and (min-width: 2100px) {
.floater {
width: 12.5%;
}
}
@media screen and (min-width: 2400px) {
.floater {
width: 11.11111111111111%;
}
}
@media screen and (min-width: 2700px) {
.floater {
width: 10%;
}
}
@media screen and (min-width: 3000px) {
.floater {
width: 9.090909090909092%;
}
}