html - 列图像充当背景图像

Question

我有两列使用 flexbox 但不必使用 flexbox。目前只是使用它，但我对其他选项持开放态度。左侧是宽度为 450px 的内容，右栏我有一个图像需要充当背景图像但不使用 css background 属性。有没有办法设置图像大小/图像列并让它溢出容器而不是推送左列内容？

设置容器宽度并使用相对定位但不按我希望的方式缩放或表现

.row--flex {
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  margin: 0;
}

.content-col--450 {
  max-width: 450px;
}

.content-col {
  margin-bottom: auto;
  margin-top: 97px;
  padding-bottom: 20px;
}

.image-col {
  padding-left: 10px;
}


}
.image {
  width: 100%;
  height: auto;
}

<div class="container container--outer">
  <div class="row--flex">
    <!--content-->
    <div class="content-col content-col--450">
      <div class="title-row">
        <h2>
          testing h2
        </h2>
      </div>

      <div class="content-row">
        <p class="p-margin-bottom">
          testing P
        </p>

        <p class="lead">
          download test
        </p>

        <button class="button--arrow">
                        <span class="button--text">download now</span>
                    </button>
      </div>
    </div>
    <!--end content-->

    <!--image-->
    <div class="image-col">
      <img src="/img/right-image.png" alt="right column image" class="image-test">
    </div>
    <!--end image-->
  </div>

第450列留在原地，图像溢出容器，表现为BG图像

Answer 1

你需要这样的东西吗？

.row--flex {
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  margin: 0;
}

.content-col--450 {
  /* max-width: 450px; */
  flex-basis: 450px;
}

.content-col {
  margin-bottom: auto;
  margin-top: 97px;
  padding-bottom: 20px;
}

.image-col {
  position: relative;
  flex-basis: 450px;
  align-self: stretch;
  padding-left: 10px;
}

.image-test {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image {
  width: 100%;
  height: auto;
}

<div class="container container--outer">
  <div class="row--flex">
    <div class="content-col content-col--450">
      <div class="title-row">
        <h2>
          testing h2
        </h2>
      </div>

      <div class="content-row">
        <p class="p-margin-bottom">
          testing P
        </p>

        <p class="lead">
          download test
        </p>

        <button class="button--arrow">
                    <span class="button--text">download now</span>
                </button>
      </div>
    </div>

    <div class="image-col">
      <img class="image-test" src="https://picsum.photos/536/354" alt="right column image">
    </div>
  </div>
</div>