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

您还可以使用其他方法，例如添加图像直到它在行宽度下的某个百分比，然后按比例放大该行上图像的大小以使它们完美匹配，但这个想法保持不变：添加图像直到它们在其父容器的范围内，然后增大或缩小图像以使它们成为精确的宽度。

Answer 2

不确定您是否正在寻找此解决方案。适用于Chrome。

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

Answer 3

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

缩放每行中的图像，使用JavaScript或CSS将其填充100％

3 个答案: