响应地缩小图像网格

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

尝试此选项

＆＃13;

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以通过为图像容器提供百分比宽度来保留比例：

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