使用 flexbox 分布带边框的填充图形，使图像高度相等

Question

我正在使用 jquery 将包装器的 flex-grow 值 div 设置为图形图像的纵横比。这是基于 here.

的建议

但是当我为图形添加边框和填充时，图像不再是相同的高度。有没有办法在此计算中包含边框和填充以使所有图像具有相同的高度？或者其他方法让这些图形图像具有相同的高度？

如果你从图中注释掉边框和填充，这就变得很明显了css，然后所有的图形图像都变得等高。

编辑：我刚刚意识到这在 Chrome 中有完全不同的行为。在 Firefox 中几乎没问题，但在 Chrome 中图像大小完全不同！

$(document).ready(function() {
  $('div.pack').css({
      "display": "flex"
    })
    .children().each(function() {
      $(this).css({
        "width": "100%"
      });
      var $img = $(this).find('img');
      var aspect = $img[0].naturalWidth / $img[0].naturalHeight;
      $(this).wrap('<div style="display:flex; flex: 0% ' + aspect + ' 1;" />')
      $img.css({
        "width": "100%",
        "height": "auto"
      })
    });
});

figure {
  padding: 4px;
  border: 1px solid lightgray;
  margin: 0;
}

div.pack>div:not(:last-child) {
  margin-right: 1%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='pack'>
  <figure>
    <img src="http://via.placeholder.com/300x300">
    <figcaption>Big cap tion Caption here Big cap tion Capt ion here </figcaption>
  </figure>
  <figure>
    <img src="http://via.placeholder.com/300x500">
    <figcaption>Caption here</figcaption>
  </figure>
  <figure>
    <img src="http://via.placeholder.com/600x150">
    <figcaption>Caption here</figcaption>
  </figure>
</div>

Answer 1

这是因为您要为其添加另一个包装器。不要将数字包装在 <div> 中，它将按预期工作。

但它不适用于非常小的设备，因为字幕会因换行而过高。我建议您使用 @media 查询在手机上全宽显示它们。因为您要为它们硬编码 style 属性，所以您需要 !important 来应用您的 @media 查询 flex.

$(window).on('load', function() {
  $('div.pack').children().each(function() {
    let img = $(this).find('img')[0], 
        asp = img.naturalWidth / img.naturalHeight;
    $(this).css({
      flex: asp + ''
    })
  });
});

figure {
  padding: 4px;
  border: 1px solid lightgray;
  margin: 0;
  font: italic normal 14px/normal serif;
}

div.pack>figure:not(:last-child) {
  margin-right: 1%;
}

figure img {
  width: 100%;
  height: auto;
}

.pack {
  display: flex;
}

@media (max-width: 560px) {
  .pack {
    flex-wrap: wrap;
  }
  .pack figure:not(#duh) {
    flex: 1 0 auto !important;
    max-width: calc(100% - 10px);
    margin: 0 0 10px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='pack'>
  <figure>
    <img src="http://via.placeholder.com/300x300">
    <figcaption>Big cap tion Caption here Big cap tion Capt ion here </figcaption>
  </figure>
  <figure>
    <img src="http://via.placeholder.com/300x500">
    <figcaption>Caption here</figcaption>
  </figure>
  <figure>
    <img src="http://via.placeholder.com/600x150">
    <figcaption>Caption here</figcaption>
  </figure>
</div>

旁注：我真的不明白为什么 flex: 0% x 1; 被解析为：

flex-grow: 0%;
flex-shrink: x;
flex-basis: 1;

与 flex: x; 的工作原理相同，它被正确解析为：

flex-grow: x;
flex-shrink: 1;
flex-basis: 0%;

但我不希望它起作用 cross-browser/cross-device，所以我只是将它恢复到原来的形式。

我还将整个脚本从 document.ready 移动到 window.load 事件，因为您真的不希望它在 <img> 加载之前变为运行。

最后一点，在前端开发中使用 Firefox 有（至少）两个主要缺点：

它的开发工具在过去几年Chrome中一直落后几个月
它的市场份额小于 Chrome - 这意味着您正在为不到 15% 的用户开发，之后，在跨浏览器阶段，您可能需要为超过 15% 的用户应用修复程序60% 的用户。反过来做更有意义。

使用 flexbox 分布带边框的填充图形，使图像高度相等

Distributing bordered padded figures with flexbox so images are equal height

css

jquery

figure

flexbox