JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="wrap">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur nihil rerum iusto aperiam, quas, provident similique obcaecati neque maxime natus qui doloremque. Aliquid, quasi, facere. Rerum, omnis, facere. Itaque, quis.</p>
  <p class="img"><img src="https://placeimg.com/640/480/nature" alt=""></p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum quo praesentium in temporibus accusantium esse. Delectus quae, aspernatur fugit non possimus! Assumenda ab unde, neque fuga, quis cupiditate provident soluta.</p>
</div>

CSS

.wrap {
  width: 400px;
  margin: auto;
}
.wrap p {
  margin-top: 30px;
  margin-bottom: 30px;
}
.wrap .img {
  position: relative;
  right: 50%;
  left: 50%;
  max-width: 100vw;
  margin-right: -50vw;
  margin-left: -50vw;
  width: 100vw;
}
.wrap .img img {
  width: 100%;
}