Question

我使用jquery将包装器div的flex-grow值设置为图形图像的宽高比。这是基于建议here。

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

如果你从图形css中注释出边框和填充，那么这就变得很明显了，那么所有的图形图像都会变得相等。

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

＆＃13;

$(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"
      })
    });
});

＆＃13;

figure {
  padding: 4px;
  border: 1px solid lightgray;
  margin: 0;
}

div.pack>div:not(:last-child) {
  margin-right: 1%;
}

＆＃13;

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

＆＃13;

Answer 1

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

但它不能在非常小的设备上工作，因为字幕太高了，不能包装。我建议你使用@media查询在手机上显示全宽。由于您要对其style属性进行硬编码，因此您需要!important来应用@media查询flex。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

的工作方式与flex: x;相同，后者可以正确解析为：

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

但我不希望它跨浏览器/跨设备工作，所以我只是将其恢复为原始状态。

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

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

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

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

1 个答案: