Как сделать так, чтобы наклонные изображения умещались в пределах 100% ширины области просмотра?

Question

У меня возникают некоторые трудности с получением наклонных изображений, чтобы они умещались в пределах 100% ширины моего окна просмотра. В частности, div two-images-outer и two-images-inner в настоящее время находятся за пределами 100% ширины области просмотра. Я хочу привести его в соответствие с остальными разделами ниже (см. Изображение). Любая помощь приветствуется!

Изображение для иллюстрации проблемы с изображением div, выходящим за пределы 100% ширины области просмотра, которое div изображения расширяется, чтобы получить наклонный наклон:

HTML:

  
      Услуги           

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>