Question

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

.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

Answer 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>

图像大于父图像：Edge居中问题

1 个答案: