在具有对象适合性的Flex容器中实现重叠图像

Question

嘿,我之前已经问了一个类似的问题并且能够实现它,那就是我必须使用png图像,缺点是它的方式太大了.

经过一些研究,我发现了一种使用svg容器和图像的alpha和beta通道的方法.

然而,我遇到的主要困难是使对象适合工作,因此图像将始终覆盖其Flexbox容器的整个50%......甚至可能吗？我错过了什么..非常感谢.

https://codepen.io/HendrikEng/pen/RVzYoR?editors=0100

.c-hero {
   align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background: grey;
  height: 30px * 15;
  text-align: center;

  &__image {
    display: flex;
    margin-bottom: -60px;
    margin-top: 60px + 19px;
    max-height: 682px;
    min-height: calc(100% + 140px);
    object-fit: cover;
    object-position: top;
    width: 50%;
  }

  &__item {
    align-self: center;
    width: 50%;
    }
}

<section>
  <div class="c-hero">
    <svg class="c-hero__image" preserveAspectRatio="xMinYMin" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <mask id="transparentmask">
                <image width="100%" height="100%" xlink:href="http://i.imgur.com/n080w42.png"></image>
            </mask>
        </defs>
        <image mask="url(#transparentmask)" width="100%" height="100%"  xlink:href="http://i.imgur.com/LTgnz9E.jpg"></image>
    </svg>
    <div class="c-hero__item">
      <p>Lorem Ipsum</p>
    </div>
  </div>
</section>

Answer 1

请将以下css放入您的codepen:

/**
* @define c-hero; weak
*/

.c-hero {
  align-items: stretch;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background: grey;
  height: 28.45vw;
  text-align: center;

  &__image {
   flex: 1 0 auto;
   min-height: 130.96%;
  }

  &__item {
    align-self: center;
    width: 50%;
  }
}