如何使倾斜的图像适合视口宽度的 100%？

Question

让倾斜的图像适合我的视口宽度的 100% 时遇到一些困难。具体来说， div two-images-outer 和 two-images-inner 当前位于视口的 100% 宽度之外。我想让它与下面的其余部分保持一致（见图）。非常感谢任何帮助！

图像说明图像 div 超出视口的 100% 宽度的问题，图像 div 正在扩展以获得倾斜的倾斜：

HTML：

  <section>
    <div class="three-images-wrapper">
  
      <div class="three-images">
        <div class="featured-image-outer">
          <div class="featured-image-inner"
               style="background-image: url(../img/servicesheader1.jpeg);">
               <h1>Services</h1>
          </div>
        </div>
    
        <div class="two-images">
          <div class="two-images-outer">
            <div class="two-images-inner">
            <div class="image1"
                 style="background-image: url('../img/servicesheader2.jpeg');">
            </div>
          </div>
          </div>
    
         
        </div>
        
      </div>
    </div>
    
  </section>

CSS：

  .three-images-wrapper {
  height: 300px;
  width: 100%;
}

  .three-images {
    margin-bottom: 4rem;
    min-height: 300px;
    position: relative;
  }
  
  .featured-image-outer {
    position: absolute;
    margin-left: -15%;
    min-height: 360px;
    overflow: hidden;
    width: 76.5%;
    -ms-transform: skew(-15deg,0deg); /* IE 9 */
    -webkit-transform: skew(-15deg,0deg); /* Safari */
    transform: skew(-15deg,0deg); /* Standard syntax */
  }

  .featured-image-inner,
  .two-images-inner {
    background-size: cover;
    background-position: center;
  }
  
  .featured-image-inner {
    left: 50px;
    position: absolute;
    top: 0;
    height: 300px;
    width: 100%;
    -ms-transform: skew(15deg,0deg); /* IE 9 */
    -webkit-transform: skew(15deg,0deg); /* Safari */
    transform: skew(15deg,0deg); /* Standard syntax */
  }
  
  .two-images {
    min-height: 300px;
    position: relative;
    right: -63vw;
    top: 0;
    width: 55%;
 
  }

    .two-images-outer {
      min-height: 130px;
      overflow: hidden;
      position: absolute;
      width: 100%;
    -ms-transform: skew(-15deg,0deg); /* IE 9 */
    -webkit-transform: skew(-15deg,0deg); /* Safari */
    transform: skew(-15deg,0deg); /* Standard syntax */
    }
      .two-images-inner {
        -ms-transform: skew(15deg,0deg); /* IE 9 */
        -webkit-transform: skew(15deg,0deg); /* Safari */
        transform: skew(15deg,0deg); /* Standard syntax */
      }

      .image1
      {
        position: relative;
        height: 300px;
        right: 19%;
        width: 100%;
        background-position: center;
        background-size: cover;
        background-clip: content-box;
      }

Answer 1

你可以使用clip-path，会更方便

.container {
  height: 300px;
  display:flex;
}
.container > * {
  background-position: center;
  background-size: cover;
  flex:1;
}
.container > :first-child {
   clip-path:polygon(0 0,100% 0,calc(100% - 100px) 100%,0 100%);
   margin-right:-40px;
}
.container > :last-child {
   clip-path:polygon(100px 0,100% 0,100% 100%,0 100%);
   margin-left:-40px;
}

<div class="container">
  <div style="background-image: url(https://picsum.photos/id/10/800/800);">
    <h1>Services</h1>
  </div>
  <div style="background-image: url(https://picsum.photos/id/14/800/800);">
  </div>
</div>