如何将图像放大/缩小到与其弹性项目兄弟相同的高度？

Question

基于这个答案，我尝试将 flex-item img元素缩小/增长到其兄弟元素的高度。 高度得到正确调整，图像被正确缩小 - 尊重纵横比 - 但img元素仍然消耗与不缩小它一样多的宽度（查看空白）：

 main { display: flex; } section { display: flex; flex-direction: column; border: thin solid black; } img { flex-basis: 0px; flex-grow: 1; object-fit: contain; overflow-y: auto; }

 <main> <section> <img src="http://via.placeholder.com/200x200"> </section> <section> <div>Match my height.</div> </section> </main>

我也尝试设置overflow-x: auto; 或width: 100% （在img上），但没有任何区别。 有没有办法在这个 flexbox 布局中获得预期的缩小图像尺寸？

有很多类似的问题，但他们不提供上述 flexbox 解决方案。 仅举几例：

• 扩大/缩小弹性项目以适应图像
• 如何将弹性项目的高度设置为与其兄弟相同的高度
• 使弹性项目兄弟姐妹具有相同的高度
• 如何平等地设置弹性项目高度[重复]

所以，有替代方案，如果没有 flexbox 解决方案...

Answer 1

CSS 网格可能会更好，但我认为这不适用于所有浏览器。

Chrome 会给出很好的结果，但 Firefox 会失败

 main { display: grid; grid-template-columns: auto auto; place-content: start; } section { border: thin solid black; } img { height: 0; min-height: 100%; object-fit: contain; overflow-y: auto; }

 <main> <section> <img src="http://via.placeholder.com/200x200"> </section> <section> <div>Match my height.</div> </section> </main>