css image vertical-alignment absolute horizontal-alignment

Keep text contrained by container and make image overflow container

I'm trying to achieve a layout like this: where i can keep the text inside the container - and in line with other sections responsively. However I want the image to overflow the container and always be on the right with no padding or margin. My current solution is not taking into account the height of the image.

Is there a neat solution for this?

.container2 {
  width: 100%;
  /*  Relative Parent  */
  position: relative;
}

.inner {
  width: 1320px;
  height: 100%;
  margin: 0 auto;
}

.hero {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.hero > div {
  width: 50%;
}
.hero-text {
  /*  Margin to place the text div  */
  margin-right: 50%;
}
.hero-image {
  position: absolute;
  right: 0;
  width: 50vw;
  height: 100%;

  img {
    width: 100%;
    max-height: 90vh;
    border-bottom-left-radius: 200px 200px;
    @media (max-width: breakpoint-max(md)) {
      border-bottom-left-radius: 60px 60px;
      border-top-right-radius: 60px 60px;
    }

  }

}

<section class="text-2 <?php if ($background_colour) {
    echo $background_colour;
} ?> ">
    <div class="container2">
        <div class="inner">
            <div class="hero">
                <div class="hero-text">           
                        <div class="heading">
                            <h2 class="section-heading">Title</h2>
                        </div>                
                   
                        <div class="paragraph">
                            <p>Cairn is making significant investment, forward funding €30 million, in order to ensure Seven Mills’ holistic development. This will be added to €186 million invested by the Urban Regeneration Development Fund and €18.8 million by the National Transport Authority.</p>
                        </div>
                    <?php } ?>
                </div>
                <div class="hero-image">
                <img src='https://www.cbre.ie/resources/fileassets/IE-AdminUI-160/e402a1af/Dundrum-Shopping-Centre-inside_Photo_3_large.jpg' />

                </div>

            </div>
        </div>
    </div>
</section>

Solution

You could consider using a grid layout. Have the contained 1100px width be constructed of two 550px grid column tracks. Have two outer grid column tracks that fill the remaining empty space. Then align the content as appropriate:

body {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
}

.container {
  display: grid;
  grid-template-columns: 1fr repeat(2, minmax(0, 550px)) 1fr;
}

.container > * {
  grid-column-start: 2;
}

.container > img {
  grid-column: 3 / span 2;
}

<div class="container">
  <div>
    <h2>Title</h2>
    <p>Cairn is making significant investment, forward funding €30 million, in order to ensure Seven Mills’ holistic development. This will be added to €186 million invested by the Urban Regeneration Development Fund and €18.8 million by the National Transport Authority.</p>
  </div>
  <img src="https://www.cbre.ie/resources/fileassets/IE-AdminUI-160/e402a1af/Dundrum-Shopping-Centre-inside_Photo_3_large.jpg" width="1600" height="1064" />
</div>

Alternatively, you could consider using negative margins with a max-width "conventional" container. Have the image "break out" of the container by applying the appropriate amount of negative right margin to go to the viewport edge:

body {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
}

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.media {
  margin-right: min(550px - 50vw, 0px);
}

<div class="container">
  <div class="text">
    <h2>Title</h2>
    <p>Cairn is making significant investment, forward funding €30 million, in order to ensure Seven Mills’ holistic development. This will be added to €186 million invested by the Urban Regeneration Development Fund and €18.8 million by the National Transport Authority.</p>
  </div>
  <div class="media">
    <img src="https://www.cbre.ie/resources/fileassets/IE-AdminUI-160/e402a1af/Dundrum-Shopping-Centre-inside_Photo_3_large.jpg" width="1600" height="1064" />
  </div>
</div>