Bootstrap carousel - problem z RWD

Witam,
mam problem z dostosowaniem slidera bootstrapowego (a właściwie sposobu skalowania) do moich potrzeb.
Ogólny plan:

• Szerokość slidera 100% (max 1920px, potem wycentrowany) - zrobione
• Między 1920px a 1321px ma się nie skalować tylko kadrować w poziomie - zrobione
• Od 1320px (włącznie) chciałbym aby slider zaczął się standardowo skalować ale zaczynając od miejsca gdzie skończył się kadrować w wyższych rozdzielczościach (czyli ze ścietymi bokami).

Ogólnie jeśli chodzi o CSS to na pewno orłem nie jestem (pracuję jako backend dev, z frontem mam bardzo mało wspólnego) więc bardzo bym prosił o pomoc. Poniżej aktualny kod:

<div id="myCarousel" class="carousel slide" data-ride="carousel">

    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
    </ol>


    <div class="carousel-inner">
        <div class="item active">
            <img src="{{ url('/img/slide1.jpg') }}"> 
        </div>

        <div class="item">
            <img src="{{ url('/img/slide1.jpg') }}">
        </div>
    </div>
</div>

.carousel.slide{
    max-width: 1920px;
    overflow: hidden;
}
.carousel-inner{
   width: 1920px;
   left: 50%;
   margin-left: -910px;
}

Aktualnie jedyny pomysł jaki mi przychodzi do głowy to podmiana obrazka w sliderze przy zmniejszeniu rozdzielczości ekranu na już docięty do tej maksymalnej szerokości i wtedy normalne skalowanie ale to jest bardzo kiepskie rozwiązanie i jeśli się da to chciałbym go uniknąć.

Pozdrawiam i z góry dziękuję za pomoc

spróbuj transform: scale i media query

czysteskarpety napisał(a):

spróbuj transform: scale i media query

Chyba nie do końca o to mi chodziło. Media query oczywiście umiem używać, o transform scale sobie poczytałem teraz i nie wydaje mi się aby to było rozwiązanie mojego problemu.

Może spróbuję jeszcze trochę inaczej wytlumaczyć.
Mam w sliderze obrazki o rozdzielczości 1920x547px. Obniżając rozdzielczość dochodzimy do punku gdzie slider ma 1320x547px (boki są ucięte i schowane przez overflow: hidden;). W tym momencie chciałbym aby aktualnie widoczna część slidera zaczęla skalować wraz z obnizaniem rozdzielczości (zarówno w pionie jak i w poziomie).

Przy dodaniu:

@media (max-width: 1320px){
    .carousel.slide{
        max-width: 100%;
    }
    .carousel-inner{
       width: 100%;
       left: auto;
       margin-left: 0;
    }
}

zaczyna się skalowac tak jak powinien, z tym że widoczne jest całe zdjęcie wraz z bokami (które służą tylko do tego żeby były na dużych rozdzielczościach) a nie sam ten środek z contentem.

Edit//
W internecie znalazłem sporo rozwiązań tego problemu, tylko żadne nie było dostosowane do bootstrap carousel bo opierały się na background-position i background-size, a w bootstrap carousel slidy są zwyklymi obrazkami () a nie wstawiane jako tło więc nie udało mi się tego zastosować.