CODEWITHSUNDEEP
jquerycssresponsive-design
Christopher
Christopher

Reputation: 620

Scale down grid of images responsively

I have three slides in a slider, each one of them having 3 floated images inside (one big at the left and two other small ones at the right) and I am using max-width: 100%; on images so they scale down as you resize the window, keeping the aspect ratio.

I can't really give fixed heights/widths as I need the images the shrink down accordingly, but the right hand side images will move to the next line if the window width becomes less than the container's.

How can I keep the images next to each other while resizing the browser and scale them down responsively avoiding scrollbars?

$('.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>

Upvotes: 0

Views: 818

Answers (2)

Tushar
Tushar

Reputation: 4418

Try This option

$('.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>

Upvotes: 2

BurpmanJunior
BurpmanJunior

Reputation: 1008

You can retain the proportions by giving the image containers a percentage width:

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

Upvotes: 0

Related Questions