css - 具有图像重叠的 Flexbox 布局

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% 的 flex 工作可行吗？

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 元素(注意它们应该如何填充整个 flex 区域)。
• 蓝框:图像元素绝对定位在 flex 容器中。

这种方法有很多注意事项 - 主要是关于您是否知道图像的尺寸和内容区域。但根据所提供的信息，我相信这是最稳定的方法。