-1

I have a parent wrapper with a maximum width:

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

And inside it, a 100vw image:

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

On Chrome and Firefox, the image is correctly centered. But on Edge, it's aligned on the left of parent.

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

marcelo2605
  • 2,734
  • 4
  • 29
  • 55

1 Answers1

0

I change it somethings in your css, here's the code:

* {
  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
  • 82
  • 1
  • 4