Изображение больше родительского: проблема с центром в Edge - PullRequest
Новая
       16

Изображение больше родительского: проблема с центром в Edge

0 голосов
/ 15 октября 2019

У меня есть родительская оболочка с максимальной шириной: 

.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

1 Ответ

0 голосов
/ 15 октября 2019

Я кое-что изменил в вашем 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>
...