javascript - 根据列表中的最大高度/宽度调整所有元素的大小

Question

我有这个列表

<ul>
    <li><img src="https://via.placeholder.com/650x100"></li>
    <li><img src="https://via.placeholder.com/150x350"></li>
    <li><img src="https://via.placeholder.com/100"></li>
    <li><img src="https://via.placeholder.com/350x350"></li>
</ul>

每个 li 都有不同的宽度和高度。我需要按如下方式呈现:

1) Each li needs to have the width of the widest li
2) Each li needs to have the height of the tallest li 
3) There is a max-width and max-height for li

因此，使用 Flexbox 我可以轻松满足 1) demo 但是我不能用css满足宽度和高度。这里的首选解决方案是什么。如果没有 javascript，这甚至可能吗？

更新:我已经实现了建议 here

Answer 1

无法检索未知高度并将其存储为变量 CSS甚至使用像 SASS 这样的预处理器, 所以没有办法用 CSS 做#2独自的。我知道您希望获得纯粹使用样式表的东西，但我提供了一个干净的示例，说明如何通过组合 CSS 来实现#1 和#2。和 jQuery .

希望对您有所帮助!

var tallest;
$('li').each(function() {
  tallest = tallest > $(this).height() ? tallest : $(this).height();
});

$('li').each(function() {
  $(this).height(tallest);
});

li {
  border: 1px solid gray;
  width: 100%;
  list-style-type: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><img src="https://via.placeholder.com/650x100"></li>
  <li><img src="https://via.placeholder.com/150x350"></li>
  <li><img src="https://via.placeholder.com/100"></li>
  <li><img src="https://via.placeholder.com/350x350"></li>
</ul>