javascript - 使用 JavaScript 或 CSS 缩放每一行中的图像以 100% 填充它

Question

我正在尝试构建一个简单的响应式图库。 Code pen here

现在只有一个简单的图片CSS设置:

img {
    height: 150px;
    float: left;
    margin: 2px;
}

我希望我的图库行的宽度为 100%，并相应地缩放每行中的图像高度以保持纵横比。

场景是这样的: 在窗口加载和调整大小时: 1.将每一行包装成#div 2.计算每一行的图像高度(覆盖初始固定值)

Desired result

我试图找到一种纯 CSS 的方式，但看起来如果没有一些 JavaScript，我就无法摆脱。

---

编辑:我能够用一些 jQUery 的“疯狂技能”来做到这一点: codepen.io/ztm/pen/NGwaEL

    $(document).ready(cascade);
    $(window).on('resize',cascade);

    function cascade() {
     $('img').css({ 'height': 150 + "px" });
    var wdth = $(".box").width();

    var img_width = 0;
    $('img').each(function() {
        img_width += $(this).outerWidth( true );

          if(img_width < wdth){
            $(this).addClass('active');
            $('.result').html('Ratio: '+wdth/img_width);
        }
    });

    var ratio = (wdth-24)/img_width;
    $('img').css({ 'height': 150*ratio + "px" });
    }

它计算具有初始高度的单行图像。

到目前为止，我找到的解决问题的最佳方法是: miromannino.com/projects/justified-gallery/comment-page-4/

Answer 1

根据您的“期望结果”链接，我认为您想要 Google+/Google 相册风格的画廊布局。在这种风格的画廊中，图像被添加到一行直到它们适合行的宽度，然后开始新的一行。

您不能只使用 css 的原因是需要一些技巧来使各种尺寸的图像完全适合每一行的宽度。最简单的解决方案是添加图像，直到它们超过行的宽度，然后裁剪所有这些图像以完美适合行，该方法在此处使用 jQuery 和 CSS 进行了详细概述:Google+ Style Image Gallery

您还可以使用其他方法，例如添加图像，直到它低于行宽一定百分比，然后放大该行上图像的大小，使它们完美贴合，但想法保持不变:添加图片，直到它们在其父容器的范围内，然后放大或缩小图像以使其达到精确的宽度。