Маломасштабная сетка изображений реагирует

Question

У меня есть три слайда в слайдере, каждый из которых имеет 3 плавающих изображения внутри (один большой слева и еще два маленьких справа), и я использую max-width: 100 %; на изображениях, чтобы они уменьшались при изменении размера окна, сохраняя соотношение сторон.

Я не могу дать фиксированную высоту/ширину, так как мне нужны изображения, урезающие соответственно, но изображения правой стороны перейдут на следующую строку, если ширина окна станет меньше, чем у контейнера.

Как сохранить изображения рядом друг с другом при изменении размера браузера и уменьшить их, избегая полосы прокрутки?

$('.slider').slick();

body { 
 
    background: purple; 
 
} 
 
.slider { 
 
    max-width: 800px; 
 
    margin: 0 auto; 
 
} 
 
.slide { 
 
    width: 100%; 
 
} 
 
.bigImg, 
 
.smallImg { 
 
    float: left; 
 
} 
 
img { 
 
    max-width: 100%; 
 
    height: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://cdn.jsdelivr.net/jquery.slick/1.3.6/slick.min.js"></script> 
 
<link href="http://cdn.jsdelivr.net/jquery.slick/1.3.6/slick.css" rel="stylesheet" /> 
 

 
<div class="slider"> 
 
    <div class="slide"> 
 
    <div class="bigImg"> 
 
     <img src="http://dummyimage.com/600x400/000/fff" /> 
 
    </div> 
 
    <div class="smallImg"> 
 
     <img src="http://dummyimage.com/200x200/000/fff" /> 
 
    </div> 
 
    <div class="smallImg bl"> 
 
     <img src="http://dummyimage.com/200x200/000/fff" /> 
 
    </div> 
 
    </div> 
 
    <div class="slide"> 
 
    <div class="bigImg"> 
 
     <img src="http://dummyimage.com/600x400/000/c00" /> 
 
    </div> 
 
    <div class="smallImg"> 
 
     <img src="http://dummyimage.com/200x200/000/c00" /> 
 
    </div> 
 
    <div class="smallImg bl"> 
 
     <img src="http://dummyimage.com/200x200/000/c00" /> 
 
    </div> 
 
    </div> 
 
    <div class="slide"> 
 
    <div class="bigImg"> 
 
     <img src="http://dummyimage.com/600x400/333/aaa" /> 
 
    </div> 
 
    <div class="smallImg"> 
 
     <img src="http://dummyimage.com/200x200/333/aaa" /> 
 
    </div> 
 
    <div class="smallImg bl"> 
 
     <img src="http://dummyimage.com/200x200/333/aaa" /> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Try Этот параметр

$('.slider').slick();

body { 
 
    background: purple; 
 
} 
 
.slider { 
 
    max-width: 800px; 
 
    margin: 0 auto; 
 
} 
 
.slide { 
 
    width: 100%; 
 
    overflow: hidden; /*Updated code*/ 
 
} 
 
    
 
.bigImg, 
 
.smallImg { 
 
    float: left; 
 
    width: 25%; /*Updated code*/ 
 
} 
 
.bigImg { 
 
    width: 75%; /*Updated code*/ 
 
} 
 
img { 
 
    max-width: 100%; 
 
    height: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://cdn.jsdelivr.net/jquery.slick/1.3.6/slick.min.js"></script> 
 
<link href="http://cdn.jsdelivr.net/jquery.slick/1.3.6/slick.css" rel="stylesheet" /> 
 

 
<div class="slider"> 
 
    <div class="slide"> 
 
    <div class="bigImg"> 
 
     <img src="http://dummyimage.com/600x400/000/fff" /> 
 
    </div> 
 
    <div class="smallImg"> 
 
     <img src="http://dummyimage.com/200x200/000/fff" /> 
 
    </div> 
 
    <div class="smallImg bl"> 
 
     <img src="http://dummyimage.com/200x200/000/fff" /> 
 
    </div> 
 
    </div> 
 
    <div class="slide"> 
 
    <div class="bigImg"> 
 
     <img src="http://dummyimage.com/600x400/000/c00" /> 
 
    </div> 
 
    <div class="smallImg"> 
 
     <img src="http://dummyimage.com/200x200/000/c00" /> 
 
    </div> 
 
    <div class="smallImg bl"> 
 
     <img src="http://dummyimage.com/200x200/000/c00" /> 
 
    </div> 
 
    </div> 
 
    <div class="slide"> 
 
    <div class="bigImg"> 
 
     <img src="http://dummyimage.com/600x400/333/aaa" /> 
 
    </div> 
 
    <div class="smallImg"> 
 
     <img src="http://dummyimage.com/200x200/333/aaa" /> 
 
    </div> 
 
    <div class="smallImg bl"> 
 
     <img src="http://dummyimage.com/200x200/333/aaa" /> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Вы можете сохранить пропорции, давая на изображение контейнеров в процентах ширина:

.bigImg{ 
    width: 75%; 
} 
.smallImg{ 
    width: 25%; 
}