Question

我遇到了麻烦，试图复制它：

我似乎无法使图像占据容器宽度并与黑框重叠。我有一份工作副本，但对手机/台式机不友好。这是Codepen中的一个简单示例：https://codepen.io/pandar3n/pen/jQqvjm

HTML：

<div class="test-container">
  <div class="wrapper">
    <div class="test-img"><img src="https://placekitten.com/800/300" /></div>
    <div class="test-text">
      <div class="testtext-inner">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
          est. Mauris placerat eleifend leo.</p>
      </div>
    </div>
  </div>
</div>

<div class="test-container alt">
  <div class="wrapper">
    <div class="test-img"><img src="https://placekitten.com/800/300" /></div>
    <div class="test-text">
      <div class="testtext-inner">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
      </div>
    </div>
  </div>

SCSS

*{
  font-family: sans-serif;
}
.test-container {
  .wrapper {
    max-width: 80vw;
    margin: 50px auto;
    position: relative;
    display: flex;
    height: 80vh;
  }
  .test-text {
    width: 50%;
    background-color: #aaa;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .testtext-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
  }

.test-img {
  width: 50%;
  align-self: center;

  img {
    transform: translateX(80px);
  }
}

&.alt {
  .test-text {
    order: 1;

    .testtext-inner {
      padding-right: 150px;
      padding-left: 50px;
    }
  }
  .test-img {
    order: 2;

    img {
      transform: translateX(-80px);
    }
  }
}
}

设法使交替的布局起作用，但是图像不会占据左/右的空白。

60％的柔韧性会达到50％吗？

Answer 1

值取决于图像的尺寸，但是我认为您过于复杂了CSS，请参见以下示例：https://codepen.io/anon/pen/mQPvZW

* {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}

.row {
  background: #333;
  display: flex;
  margin: 20px;

  .col {
    background: #c33;
    flex-grow: 0;
    margin: 10px;
    min-height: 400px;
    padding: 20px;
    position: relative;
    width: 60%;

    &:first-child {
      margin-right: 0;
      width: 40%;
    }

    img {
        height: 300px;
        position: absolute;
        // Adjust the indent of the image as necessary.
        // 30px calculated by 20px padding + 10px margin gutter.
        right: -30px;
        z-index: 1;

        // If you want to vertically align in the area assuming you dont know the dimensions of the image.
        top: 50%;
        transform: translateY(-50%);
      }
  }

  + .row .col {
    width: 40%;

    img {
      right: auto;
      left: -30px;
    }

    &:first-child {
      width: 60%;
    }
  }
}

下面的简短说明，其中包含描述样式的图片：

黑匣子：Flex包装器。
红色框：弹性商品（请注意它们两者应如何填充整个弹性区域）。
蓝框：图像元素绝对位于flex容器中。

此方法有很多警告-主要围绕是否知道图像的尺寸和内容区域。但是根据所提供的信息，我相信这是最稳定的方法。

Answer 2

更新：我设法以某种方式使其与flexbox一起工作，在这种情况下，我不得不将div覆盖在另一个之上，以使发生重叠。

HTML：

<div class="block">
  <div class="image-wrapper">
  <img src="https://placekitten.com/600/400"/>
</div>
  <div class="div-wrapper">
  <h1>There are some text here.</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, ullam esse quia suscipit sapiente, provident expedita voluptatum illo facilis asperiores vitae. Atque aliquid et similique nostrum molestiae, dolores dignissimos beatae.</p>
</div>
</div>

<div class="block">
  <div class="div-wrapper">
  <h1>There are some text here.</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, ullam esse quia suscipit sapiente, provident expedita voluptatum illo facilis asperiores vitae. Atque aliquid et similique nostrum molestiae, dolores dignissimos beatae.</p>
</div>
  <div class="image-wrapper">
  <img src="https://placekitten.com/900/300"/>
</div>
</div>

<div class="wrapper2">
  <div class="image-overlay">
    <img src="https://placekitten.com/600/400"/>
  </div>
  <div class="row-wrapper">
    <div class="filler"></div>
    <div class="text-block">
      <div class="text-wrapper">
        <h1>Hello World!</h1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Non at sunt consequatur laborum molestiae quidem pariatur quibusdam! Ipsum tempore explicabo dolorum voluptate, asperiores sapiente quod qui modi, iusto assumenda adipisci.</p>
      </div>
    </div>
  </div>
</div>

<div class="wrapper2">
  <div class="image-overlay alt">
    <div class="overlay-filler"></div>
    <div class="image-me">
      <img src="https://placekitten.com/600/400"/>
    </div>
  </div>
  <div class="row-wrapper alt">
    <div class="filler"></div>
    <div class="text-block">
      <div class="text-wrapper">
        <h1>Hello World!</h1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Non at sunt consequatur laborum molestiae quidem pariatur quibusdam! Ipsum tempore explicabo dolorum voluptate, asperiores sapiente quod qui modi, iusto assumenda adipisci.</p>
      </div>
    </div>
  </div>
</div>

SCSS：

.block{
  width: 600px;
  margin: 0 auto;
  border: 1px solid black;
}
.div-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    text-align: center;
}
.image-wrapper{
  width: 100%;
  text-align: center;
}
.image-wrapper > img {
  width: 100%;
}


/* Second Block */
.wrapper2{
  width: 80%;
  margin: 0 auto;
  border: 1px solid purple;
  height: 100vh;
}
.row-wrapper{
  display: flex;
  &.alt {
    .filler{
      order: 1;
    }
  }
}
.filler{
  width: 50%;
}
.text-block{
  width: 50%;
  background: blue;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.text-wrapper{
  width: 50%;
}
.image-overlay{
  width: 45%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  &.alt{
    width: 100%;
    .overlay-filler{
      width: 15%;
    }
    .image-me{
      width: 45%;
      img{
      width: 100%;
    }
    }
  }
}
.image-overlay > img {
  width: 100%;
}

说明：它的工作方式是在一个容器中有两个div； overlay-div和row-wrapper（可以将其命名为其他名称）。 overlay-div的位置绝对，将使其位于行包装器的顶部。

row-wrapper是一个带填充符和文本块的flexbox。

请立即注意，要使此方法起作用，必须将包装纸的高度设置为100vh。

具有图像重叠的Flexbox布局

2 个答案: