CSSブレーク画像私はdiv要素のうち、画像を打破しようとしていた容器

Question

の外に、私はこのレイアウトを持っている...

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と同じにする必要があります

これはCSで可能ですか私はそれを達成するためにいくつかの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%); 
}