缩放每行中的图像以使用 JavaScript 或 CSS 100% 填充答案

【问题标题】：Scale images in each row to fill it 100% with JavaScript or CSS缩放每行中的图像以使用 JavaScript 或 CSS 100% 填充
【发布时间】：2016-01-13 03:23:22
【问题描述】：

我正在尝试构建一个简单的响应式画廊。 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/

【问题讨论】：

这是不可能的。您将失去纵横比以使它们适合宽度。在您想要的结果中，图像的宽度会增加，但高度不会改变
在他想要的结果中，高度改变了@JacobRaccuia
@Jacob - 每行的高度都会改变
高度确实发生了变化，但这仍然是不可能的。你永远不会有完美的匹配。填充可用宽度将使每个图像的高度增长量不同，因为它们具有不同的比率。
@LcSalazar，可以将行宽除以行中图像的总宽度 - 你会得到一个比率。将此比率乘以每个图像的宽度，图像将填满行宽。

标签： javascript jquery html css

【解决方案1】：

根据您的“所需结果”链接，在我看来，您需要 Google+/Google 照片风格的图库布局。在这种风格的画廊中，图像被添加到一行中，直到它们适合行的宽度，然后开始新的一行。

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

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

【讨论】：

【解决方案2】：

不确定您是否正在寻找此解决方案。在 Chrome 中运行良好。

  [1]: http://codepen.io/sridharspeaks/pen/meBwNN

【讨论】：

【解决方案3】：

您可以查看Isotope 或Masonry 插件来帮助您解决此问题。

【讨论】：

谢谢，但我正在尝试从头开始学习并避免使用插件来完成这项任务