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>

列图像表现为背景图像

1 个答案: