图像大于其父级：Edge 上的居中问题答案

【问题标题】：Image bigger than it's parent: centering issue on Edge图像大于其父级：Edge 上的居中问题
【发布时间】：2020-02-11 23:13:48
【问题描述】：

我有一个最大宽度的父包装器：

.wrapper {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

在里面，一个100vw 图像：

figure img {
  width: 100vw;
  max-width: 100vw;
}

在 Chrome 和 Firefox 上，图像正确居中。但在 Edge 上，它在父级的左侧对齐。

https://codepen.io/marcelo2605/pen/JjjXGvj?editors=0110

【问题讨论】：

可能相关：stackoverflow.com/a/55102019/8620333

标签： css microsoft-edge

【解决方案1】：

我在你的 css 中改变了一些东西，这是代码：

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: hidden;
}

img {
  width: 100%;
  height: auto;
}

.wrapper {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.wrapper p {
  max-width: 500px;
}

figure{
  margin: 0;
  position: relative;
  
}

.foo {
  position: relative;
}

figure img {
  width: 100vw;
  max-width: 100vw;
}

<div class="wrapper">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, sed! Id optio quis excepturi sapiente quidem rerum fugit necessitatibus, pariatur sed dignissimos cupiditate obcaecati veritatis! Obcaecati, omnis. A, temporibus aperiam.</p>
<figure>
  <div class="foo">
  <img src="https://new.truviews.com.br/wp-content/uploads/2019/09/jun-13-meatwar-nocal-1920x1080-1920x1080.png" alt="">
    </div>
</figure>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Libero temporibus impedit eaque nulla consequuntur quas eos distinctio! Quisquam vitae culpa ipsa rem nihil, dolorum tenetur mollitia, porro placeat sequi veritatis!</p>
  </div>

【讨论】：

嘿@matmartino，感谢您的建议。但我需要将max-width 保留为.wrapper 规则。