html - CSS 将图像从容器中分离出来

Question

我想从 div 中分离出一个图像，我有这个布局...

https://jsfiddle.net/njegLL8h/

#maincontent {
  background-color: yellow;
}

.mainwidth {
  position: relative;
  max-width: 600px;
  width: 100%;
  margin: auto;
  background: green;
}

.mainwidth_content {
  max-width: 400px;
  width: 100%;
  margin: auto;
  background: #fff;
}

.restrictedwidth {
  max-width: 700px;
  margin: auto;
}

img {
  max-width: 100%;
}

<section id="maincontent">
  <div class="mainwidth">
    <div class="mainwidth_content">
      <div class="restrictedwidth">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac suscipit enim. Quisque posuere velit ipsum, ut vestibulum nibh tempor a. Sed sollicitudin sodales vehicula. Etiam tempor consectetur felis, sit amet porttitor nisi mattis a. Nunc eu finibus
          neque, id volutpat ligula. Pellentesque vehicula, elit non egestas varius, massa lectus tristique nisl, vitae porttitor magna lacus a metus. Mauris nibh sapien, auctor hendrerit interdum non, blandit vel ligula. Pellentesque habitant morbi tristique
          senectus et netus et malesuada fames ac turpis egestas. Mauris eget ipsum ac velit accumsan mattis fermentum pulvinar nisi. Nullam blandit libero eu mi tempor, a laoreet mauris vehicula. Quisque dapibus neque et risus eleifend pretium. Phasellus
          eget maximus nisl.
        </p>
        <img src="https://dummyimage.com/800x400/000000/fff"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac suscipit enim. Quisque posuere velit ipsum, ut vestibulum nibh tempor a. Sed sollicitudin sodales vehicula. Etiam tempor
        consectetur felis, sit amet porttitor nisi mattis a. Nunc eu finibus neque, id volutpat ligula. Pellentesque vehicula, elit non egestas varius, massa lectus tristique nisl, vitae porttitor magna lacus a metus. Mauris nibh sapien, auctor hendrerit
        interdum non, blandit vel ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris eget ipsum ac velit accumsan mattis fermentum pulvinar nisi. Nullam blandit libero eu mi tempor, a laoreet mauris
        vehicula. Quisque dapibus neque et risus eleifend pretium. Phasellus eget maximus nisl.
      </div>
    </div>
  </div>
</section>

图像需要位于 .restrictedwidth div 中，但我需要宽度与 .mainwidth_content 一样宽

这可能使用 CSS 还是我需要使用一些 javascript 来实现它？

Answer 1

将图像包裹在一个 div 中，然后使其绝对定位并使其水平居中。也请不要像那样在 1 行中编写代码。我们很难阅读。 https://jsfiddle.net/njegLL8h/1/

.wrapper {
  position: relative;
  width: 100%;
  height: 300px;
}
img{
  width: 600px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX( -50% );
}