Question

我正在使用jquery来计算图像的纵横比并将其设置为flex-grow值，以便在填充容器宽度时，flexbox中的所有图像都显示相同的高度。

这在Firefox中运行良好，但在Chrome中有不同的行为。

在Firefox中，所有图像都具有相同的高度并保持其宽高比。

在Chrome中，所有图片的宽度都与Firefox相同，但它们会垂直拉伸到最高项目的高度，500px。

如何解决Chrome浏览器的外观？

$('div.pack').css({
    "display": "flex"
  })
  .children().each(function() {
    var aspect = this.naturalWidth / this.naturalHeight;
    $(this).wrap('<div style="display:flex; flex: 0% ' + aspect + ' 1;" />')
  });

img {
  width: 100%;
  height: auto;
}

div.pack > div:not(:last-child) {
  margin-right: 2%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='pack'>
  <img src="http://via.placeholder.com/400x150"/>
  <img src="http://via.placeholder.com/150x500"/>
  <img src="http://via.placeholder.com/300x300"/>
</div>

Answer 1

您需要将align-items: flex-start添加到div包装的CSS中，否则Chrome会拉伸 img作为align-items的默认值就是这样，stretch。

我还将速记弹性属性的顺序更改为正确的位置

另请注意，using percent for margin and padding on flex items可能会根据规范的事实而有所不同。允许它，建议不要。

Stack snippet

$('div.pack').css({
    "display": "flex"
  })
  .children().each(function() {
    var aspect = this.naturalWidth / this.naturalHeight;
    $(this).wrap('<div style="display: flex; align-items: flex-start; flex: ' + aspect + ' 1 0%;" />')
  });

img {
  width: 100%;
  height: auto;
}

div.pack > div:not(:last-child) {
  margin-right: 2%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='pack'>
  <img src="http://via.placeholder.com/400x150"/>
  <img src="http://via.placeholder.com/150x500"/>
  <img src="http://via.placeholder.com/300x300"/>
</div>

另一种选择是简单地删除display: flex包装上的div。

Stack snippet

$('div.pack').css({
    "display": "flex"
  })
  .children().each(function() {
    var aspect = this.naturalWidth / this.naturalHeight;
    $(this).wrap('<div style="flex: ' + aspect + ' 1 0%;" />')
  });

img {
  width: 100%;
  height: auto;
}

div.pack > div:not(:last-child) {
  margin-right: 2%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='pack'>
  <img src="http://via.placeholder.com/400x150"/>
  <img src="http://via.placeholder.com/150x500"/>
  <img src="http://via.placeholder.com/300x300"/>
</div>

使用flexbox分发图像，使用jquery - Firefox与Chrome行为相同的图像高度相同

1 个答案: