Перекошенный div вне родительского контейнера

Question

У меня есть серия div, которые разбивают его родительский контейнер. Я хотел бы знать, как их содержать.

Вот копия моей ручки: https://codepen.io/buzztnt/pen/oNgVOLO

.wrapper {
  -webkit-transform: skew(-35deg);
  transform: skew(-35deg);
  overflow: hidden;
  -o-object-fit: cover;
  object-fit: cover;
  border-right: 2px green solid;
}

img {
  -webkit-transform: skew(35deg) scale(1.5);
  transform: skew(35deg) scale(1.5);
  height: auto;
  width: 100%;
}

<div class="container-fluid">
  <div class="row no-gutters">
    <div class="col-2 wrapper">
      <img src="https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313__340.jpg" alt="" srcset="">
    </div>
    ...
  </div>

Я также исследовал это решение, но я не могу использовать значение "auto" в функции cal c так, как хочу изображения должны быть отзывчивыми.

Answer 1

Это должно сработать. Когда вы наклоняете div и img, вы должны думать о том, что происходит с формой.

.wrapper {
  -webkit-transform: skew(-35deg);
  transform: skew(-35deg);
  overflow: hidden;
  -o-object-fit: cover;
  object-fit: cover;
  border: 2px green solid;
  width:100%;
  margin:0 auto;
}

img {
  -webkit-transform: skew(35deg) scale(1.5);
  transform: skew(35deg) scale(1.5);
  height: auto;
  width: 100%;
}

div{border:black 1px solid;}

.container-fluid{
  overflow: hidden;}

<div class="container-fluid">
  <div class="row no-gutters">
    <div class="col-2 wrapper">
      <img src="https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313__340.jpg" alt="" srcset="">
    </div>
    ...
  </div>