CODEWITHSUNDEEP
htmlcss
fightstarr20
fightstarr20

Reputation: 12598

CSS break image out of container

I am trying to break an image out of a div, i have this layout...

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>

The image needs to be located in the .restrictedwidth div but I need the width to be as wide as .mainwidth_content

Is this possible using CSS or would I need to use some javascript to achieve it?

Upvotes: 0

Views: 282

Answers (1)

Yudi Chang
Yudi Chang

Reputation: 448

wrap the image inside of a div then make it position absolute and make it horizontally centered. Also please refrain from writing a code in 1 line like that. it's hard for us to read. https://jsfiddle.net/njegLL8h/1/

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

Upvotes: 4

Related Questions