IIIu6ko

Можно градиентами jsfiddle.net/78jgyf0e

можно использовать object-fit и этот скрипт https://github.com/bfred-it/object-fit-images

Не уверен что начинающим верстальщикам нужно заморачивать себе голову всем этим ужосом:) Но может кому-то и пригодится:
- создаю новый проект на базе немного допиленного Optimized4HTML (можно копировать папку руками, можно сохранить в PhpStorm как темплейт, второе разумеется удобнее). Проект имеет следующую структуру:

- открываю его в PHPStorm, через командную строку устанавливаю пакеты и запускаю вотчер со следующей конфигурацией:

(таким образом отслеживаются изменения в файлах index.html, *.scss, common.js, а так же релодится браузер; в процессе верстки просто перескакиваем на виртуальный рабочий стол с открытым сайтом и сразу видим изменения, а если есть второй монитор то вообще песня). Кстати, перечень пакетов ннада?

- из плюшек emmet и sass обязательно, в качестве таскранера - gulp.
- макеты у меня в .sketch, так же кто не пробовал советую попробовать Figma, получите практически скетч в браузере. Adobe Photoshop не люблю. Adobe XD не пробовал, но осуждаю. Здесь наверное больше дело вкуса и реалий, в которых вы работаете (например, в каком формате получаете макеты, какая ОС на рабочем компе).
Вроде все просто. Что непонятно - спрашивайте, отвечу.

UPD. Optimized4HTML недавно перешел на Gulp 4, советую попробовать. Учтите, что Gulp 4 не имеет обратной совместимости с галпфайлами предыдущей версии, так как немного изменился синтаксис.

Пример:
codepen.io/iiil/pen/yDbtL

При добавлении текста вызывайте функцию scale. Переменные step и minfs — это шаг изменения размера шрифта и минимальный размер шрифта. При достижении минимума, появляется вертикальный скролл.

отсюда

function once(fn, context) { 
    var result;

    return function() { 
        if(fn) {
            result = fn.apply(context || this, arguments);
            fn = null;
        }

        return result;
    };
}

// Пример использования
var canOnlyFireOnce = once(function() {
    console.log('Запущено!');
});

canOnlyFireOnce(); // "Запущено!"
canOnlyFireOnce(); // Не запущено

Без тормозов = руки + css. Можно немного js для красивостей вроде постраничной прокрутки.
Пример на CSS
А вообще поищите на codepen. Огромнейшая выдача по запросу parallax, с готовыми примерами. Хотя библиотеки все же не рекомендую, так как вы не будете знать как именно работает ваш код.

Вот мое решение через CSS.

Ты из какого города?

Я сейчас в Индонезии на о. Бали, уже 3ий месяц. Если Кратко, то 1 тыс баксов в притык хватает (заработок в несколько раз больше). И не забывайте, у вас всегда должны быть деньги на ЧС. Хотя если честно, я особо не вижу куда деньги тратить тут.

Затраты складываются из следующих расходов, если ты один:
1) Билеты, билеты на визаран. Если летишь через какую нибудь страну, к примеру Тай, то там в Бангкоке можно сделать социальную визу и находиться на острове до 6 месцев.
2) Страховка - это обязательно везде в Азии, медицина очень дорогая. Стоимость от 2 тыс рублей обычная за месяц, и 6-7 тыс с покрытием мотобайка при наличии прав и спортивной страховки. У меня спортивная страховка.
3) Продление визы - 2500 руб в месяц через агента. можно самому париться, но тут лениво очень мотаться.
4) мопед - 2500 руб в месяц + бензин на тысячу где то если много ездишь
5) Главное! Жилье. В моем районе, это серферский хипстерский район, жилье в среднем 12-20 тыс рублей за комнату в гестхаусе, дороже комната на вилле. Чем ближе к океану, тем больше платить.
6) Питание. Стоит отметить, что продукты тут другие. Что-то дороже, что-то дешевле. Иногда дешевле кушать где- то, забегаловок на любой кошелек хватает. Сейчас мы кушаем днем в кафешке, где цены сопоставимы бизнес ланчам в России.
Молочка - отстой, невкусная и стоит дорого. кисломолочных продуктов нет.
свинина и курица - тоже невкусная, но цена как в России.
есть все из штатов , бразилии, италии, испании и тд, дорого.
Рис - фрукты - овощи, - навалом и дешевле чем в России.
Хлеб есть, но не нстолько вкусный как в России.
7) связь - 300 руб месяц
8) Уроки серфинга - 40-50 долларов занятие, надо 3 занятия для того чтобы самому кататься. Аренда доски - 250 руб сет (3 часа). Я купил доску себе

Т.е. это расходы, если ты тут живешь. Если путешествуешь, то затраты на порядок больше. Как видишь, в 1К долларов жить тут можно. Из плюсов - я серфлю каждый день, и мне это очень нравится.

gulp.task('jade-watch', ['jade'], browserSync.reload);

попробуйте разделить компиляцию jade и релоад, возможно просто jade не успевает скомпилировать html на выходе

gulp.task('jade', function(){

  return gulp.src('app/jade/*.jade')
    .pipe(jade({
      pretty: true
    }))
    .pipe(gulp.dest('app'));

});

gulp.task('watch', function() {
    	gulp.watch(path.html).on('change', browserSync.reload);
    	gulp.watch(path.jade, ['jade']);
});

если проблема в этом, то слежка за html для перезагрузки нежели за jade должна помочь
если же нет, то вам придется привести полный код, т.к проблема может быть в путях файлов

Вам подойдёт плагин Isotope