CODEWITHSUNDEEP
javascriptjqueryhtmlcssresponsive-design
riogrande
riogrande

Reputation: 349

responsive image gallery with different heights - how to achieve this with css (or jquery)

Hello i am trying to achieve this effect with css but im not sure is it possible, here is an image what im trying to do:

http://s10.postimg.org/c0varlkvd/stack.jpg

it needs to have fluid width (70%, 30%), then later i will put float:none via mediaquerys so images will go one below the other, but it also needs to have fluid height, or the right column needs to be same height as the left

so i tried with this css: 

.gallery{
    width:100%;
    -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.gallery-70{
    width:70%;
    float:left;
    box-sizing: border-box;
}
.gallery-30{
    width:30%;
    float:right;
    box-sizing: border-box;
}
.gallery img{
    width:100%;
}

html:

<div class="gallery">
<div class="gallery-70">
<img src="images/img1.jpg">
</div>
<div class="gallery-30">
<img src="images/img1.jpg">
</div>
<div class="gallery-30">
<img src="images/img1.jpg">
</div>
</div>

and i got this result

http://s15.postimg.org/b7wucgdjf/stack2.jpg

then i tried to set height for big and small images like this 

.gallery .imgbig{
    width:100%;
    height:100%;
    max-height:500px;
}
.gallery .imgsmall{
    width:100%;
    height:100%;
    max-height:250px;
}

And it looks fine (cant put image beacuse reputation) but when i try to resize it and img width:100% do its thing it gets back to SECOND LINK (again reputation) .

Is there any way to do this with css or jquery.

TY in advance and sry for bad english

Upvotes: 2

Views: 951

Answers (1)

plondon
plondon

Reputation: 492

Use Scott Rubin's jQuery plugin http://srobbin.com/jquery-plugins/backstretch/. It helps keep the aspect ratio of your images on resize. You'll have to explicitly set the height of your small images to 50% of your parent div, whose height will get set by your large image.

JS

$('.imgsmall').each(function() {)
  url = $(this).find('img').attr('src');
  $(this).backstretch(url);
});

CSS

.imgsmall {
  height: 50%;
}
.imgsmall > img {
  opacity: 0;
}

Upvotes: 1

Related Questions