Максим Тимофеев

можно в css:
.item {float:left; width:200px; height:200px;}
.item:first-of-type {width:400px; height:400px;}
.item:last-of-type::after {content:""; display:block; height:1px; width:100%; clear:left; }

world-networks.ru/view_post.php?id=177
да и собственно https://yandex.ru/search/?text=canvas%20анимирован...

Мне нравится такая реализация: habrahabr.ru/post/127994

Вариантов миллион. Например getbootstrap.com/css/#grid или любой другой css framework c grid. Или например isotope.metafizzy.co
Или просто на css играя с width контейнера для фото, а фото на background и backgroundsize cover или contain

https://yandex.ru/search/?text=jquery%20горизонтал...

.phone:last-child - это последний детеныш внутри .phone, а у Вас таких нет
Тут видимо надо .phone:last-of-type

не знаю как там, но можно сделать 2 div, картинки на background. 1 поверх второго. И менять верхнему width в зависимости от положения курсора + правый бордер зеленый.

Спец всегда найдет способ достать изображение. А то что Вы хотите, это борьба с посетителями. Им будет неудобно. Любое сложно решение версткой и стилями, обходится использованием древнего браузера, например. Если надо спрятать фото хорошего качества - его не стоит грузить в браузер. Или накладывать вотермарк еще на сервере.

Отрицательный маргин, схлопнувшиеся padding и margin, абсолютное позиционирование и еще миллион вариантов. Дайте ссылку - Вам дадут ответ.

Я бы сделал попап для ie "Вы используете програмное ПО, не предназначеное для работы в интернете, пожалуйста скачайте браузер."
В edge кстати все работает.
Проверьте не отключены ли у Вас в ie js скрипты. Я как-то из-за этого день потерял.

.el{
  transition:none; 
  display: inline-block;
  vertical-align: top;
  background:#000;
  width: 50px;
  height: 50px;
  
  &:hover{
    width: 200px;
    transition:all 250ms ease; 
  }
}

Так?

Если есть такая необходимость - стоит. Ради того, что б было - нет.

Ну так сделайте разные классы или id и инициализируйте вручную по id или классу
Первая же строка в доках про инициализацию www.gmarwaha.com/jquery/jcarousellite/documentation.php

$(function() {
    $("#carusel1").jCarouselLite({
        btnNext: ".next1",
        btnPrev: ".prev1"
    });
    $("#carusel2").jCarouselLite({
        btnNext: ".next2",
        btnPrev: ".prev2"
    });
    $("#carusel3").jCarouselLite({
        btnNext: ".next3",
        btnPrev: ".prev3"
    });
});

Да хоть 50.
Хотя мне больше по душе fotorama.io

А как вы себе это представляете? В окне 200000 символов уместить на одну страницу? Если контент совершенно не известен, то никак. Если есть хоть приблизительное понимание сколько там может быть текста, то можно менять размер шрифта, например через vh. Что-то типа:

@media print {
body {font-size:2vh; line-height:2vh;}
}

backround-size:cover;
или
backround-size:contain;