具有不同高度的响应式图片库 - 如何使用 css（或 jquery）实现这一点答案

【问题标题】：responsive image gallery with different heights - how to achieve this with css (or jquery)具有不同高度的响应式图片库 - 如何使用 css（或 jquery）实现这一点
【发布时间】：2015-02-25 02:10:51
【问题描述】：

您好，我正在尝试使用 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 width:100% 做它的事情时，它会回到 SECOND LINK（再次声誉）。

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

提前TY，英语不好的，抱歉

【问题讨论】：

标签： javascript jquery html css responsive-design

【解决方案1】：

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

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

CSS

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

【讨论】：