具有不同高度的响应式图库 - 如何使用css（或jquery）实现此目的

Question

您好我正在尝试用css实现此效果但我不确定是否可能，这是一个图像我想尝试做什么：

它需要有流体宽度（70％，30％），然后我将通过mediaquerys放置float：none，因此图像将一个在另一个之下，但它也需要具有流体高度，或者需要正确的列与左侧相同的高度

所以我尝试了这个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>

我得到了这个结果

然后我试图为这样的大小图像设置高度

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

它看起来很好（不能把图像作为声誉），但是当我尝试调整它的大小和img宽度：100％做它的事情它会回到SECOND LINK（再次声望）。

有没有办法用css或jquery做到这一点。

TY提前和sry英语不好

Answer 1

使用Scott Rubin的jQuery插件http://srobbin.com/jquery-plugins/backstretch/。它有助于保持图像的纵横比调整大小。您必须明确将小图像的高度设置为父div的50％，其高度将由您的大图像设置。

<强> JS

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

<强> CSS

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