保持文本受容器约束并使图像溢出容器

Question

我正在尝试实现这样的布局：，我可以将文本保留在容器内 - 并与其他部分响应地保持一致。但是我希望图像溢出容器并始终位于右侧，没有填充或边距。我当前的解决方案没有考虑图像的高度。

有没有一个巧妙的解决方案？

.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>

Answer 1

您可以考虑使用网格布局。所包含的

1100px

宽度由两个

550px

网格柱轨道构成。有两个外部网格列轨道填充剩余的空白空间。然后根据需要对齐内容：

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>

或者，您可以考虑在“传统”容器中使用负边距。通过应用适当数量的负右边距以到达视口边缘，使图像“突破”容器：

max-width

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);
}