javascript - 具有不同高度的响应式图片库 - 如何使用 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 width:100% 做它的事情它会回到第二个链接(再次声誉)。

有什么办法可以用 css 或 jquery 做到这一点。

提前联系，抱歉英语不好

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