图像的最大宽度不适用于 IE 11 的 flexbox，但适用于谷歌浏览器
Posted
技术标签:
【中文标题】图像的最大宽度不适用于 IE 11 的 flexbox，但适用于谷歌浏览器【英文标题】：max-width of image not working in flexbox for IE 11 but works on google chrome 【发布时间】：2020-04-06 01:29:35 【问题描述】：我正在使用 flexbox 创建一个 2 x 2 网格布局，其中第一列项目合并在一起，如下所示：
这在谷歌浏览器中运行没有问题。图像可以增长到 flexbox 分配的最大剩余宽度。但是，它在 IE11 中不起作用。该图像拉伸其容器盒，我一直在谷歌搜索并尝试不同的解决方案，但无济于事。看来我的情况与其他类似问题有点不同。
这是它在 IE 中的样子：
你能帮我找出问题吗？我提供了一个 plunker，您可以在其中尝试您的解决方案。
CSS：
body
width: 100%;
.element
display: flex;
flex-direction: row;
width: 100%;
.name
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 100px;
font-weight: bolder;
.detail-wrapper
display: flex;
flex-direction: column;
flex: 1 0 0;
width: 100%;
.detail
display: flex;
flex: 1 0 0;
align-items: center;
justify-content: center;
flex-wrap: wrap;
.detail img
max-width: 100%;
.name, .detail
border: 1px solid;
margin: 8px;
padding: 8px;
text-align: center;
word-break: break-word;
html：
<div class="element">
<div class="name">name</div>
<div class="detail-wrapper">
<div class="detail">
<img src="https://miro.medium.com/max/1200/1*y6C4nSvy2Woe0m7bWEn4BA.png" />
</div>
<div class="detail">
<a href="#">url</a>
</div>
</div>
</div>
https://plnkr.co/edit/q6Xme6ETvW20Gw57CIWQ?p=preview
【问题讨论】：
您是否尝试将display: block 设置为img？
没用。
【参考方案1】：
IE 浏览器与 Flex 存在一些问题。使用 flex 无法正确计算值。
(1) 我建议你将 .detail img 类中的 max-width 替换为 width。
(2) 我建议您在 .detail 类中将 flex: 1 0 0; 替换为 flex: 0 0 auto;。
编辑：-
在一个额外的 div 中添加了 img 标签，解决了@Xegara 告知的问题。它还适用于 max-width For IE 11 浏览器。
修改代码：
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
<style>
body
width: 100%;
.extra_div
width: 100%;
.element
display: flex;
flex-direction: row;
width: 100%;
.name
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 100px;
font-weight: bolder;
.detail-wrapper
display: flex;
flex-direction: column;
/*flex: 0 0 auto;*/
width: 100%;
.detail
display: flex;
/*flex: 1 0 0;*/
flex: 0 0 auto; /*-------------------------made change here */
align-items: center;
justify-content: center;
flex-wrap: wrap;
.detail img
max-width: 100%; /*-------------------------made change here */
.name, .detail
border: 1px solid;
margin: 8px;
padding: 8px;
text-align: center;
word-break: break-word;
</style>
</head>
<body>
<div class="element">
<div class="name">name</div>
<div class="detail-wrapper">
<div class="detail">
<div class="extra_div">
<img src="https://miro.medium.com/max/1200/1*y6C4nSvy2Woe0m7bWEn4BA.png" />
</div>
</div>
<div class="detail">
<a href="#">url</a>
</div>
</div>
</div>
</body>
</html>IE 11 中的输出：
【讨论】：
设置宽度似乎不是问题，但是如果图像小于容器，那么我希望它以原始大小显示。将宽度设置为 100% 将始终使图像适合容器。 我将 img 包含在另一个宽度为 100% 的 div 容器中，并且成功了！您可以相应地修改您的答案或提出更好的解决方案，如果您有，我会接受您的答案。 我根据您的最后评论更新了我的答案。感谢您的理解。以上是关于图像的最大宽度不适用于 IE 11 的 flexbox，但适用于谷歌浏览器的主要内容，如果未能解决你的问题，请参考以下文章