Блог

У меня возникли проблемы с сокрытием абсолютно позиционированного изображения в сетке css. Вот как выглядит код:

HTML:

 <div class="relative-parent">
  <div v-for="item in 12" class="hiding-parent">
    <div class="child"></div>
  </div>
</div>
 

Здесь относительным родительским элементом является css-grid с повторяющимися скрытыми родительскими элементами

CSS:

 .relative-parent {
  position: relative;
  width: 500px;
  height: 500px;
  display: grid;
  place-items: center;
  grid-gap: 5px;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(3, 100px);
}
.hiding-parent {
  overflow: hidden;
  width: 100px;
  height: 100px;
}

.child {
  position: absolute;
  width: 100%;
  height: 100%;
  background: red;
}
 

Мне нужно, чтобы дочерний элемент был на всю ширину относительного родительского элемента. Все дочерние элементы представляют собой одно изображение, расположенное абсолютно, так что, если overflow: hidden работает с скрывающим родительским элементом, это будет выглядеть так, как будто изображение разделено на 12 частей.

Хотя использование position: relative для скрывающего родительского элемента исправляет скрытие, оно делает каждое изображение шириной скрывающего родительского элемента, что противоречит цели. Я не могу использовать position: absolute или fixed для скрывающего родительского элемента, поскольку это испортило бы сетку.

Я немного запутался в этом и был бы очень признателен за помощь. Спасибо!

Link:
https://codesandbox.io/s/eager-worker-2pc5o?file=/src/App.js
HTML:

     <div className="relative-parent">
      <div className="child item1">
        <img src="https://source.unsplash.com/random" />
      </div>
      <div className="child item2">
        <img src="https://source.unsplash.com/random" />
      </div>
      <div className="child item3">
        <img src="https://source.unsplash.com/random" />
      </div>
      <div className="child item4">
        <img src="https://source.unsplash.com/random" />
      </div>
      <div className="child item5">
        <img src="https://source.unsplash.com/random" />
      </div>
      <div className="child item6">
        <img src="https://source.unsplash.com/random" />
      </div>
      <div className="child item7">
        <img src="https://source.unsplash.com/random" />
      </div>
      <div className="child item8">
        <img src="https://source.unsplash.com/random" />
      </div>
      <div className="child item9">
        <img src="https://source.unsplash.com/random" />
      </div>
    </div>
 

CSS:

 .relative-parent {
  display: grid;
  grid-gap: 5px;
  grid-template-areas:
    "one two three "
    "four five six "
    "seven eight nine";
}
.item1 {
  grid-area: one;
}
.item2 {
  grid-area: two;
}
.item3 {
  grid-area: three;
}
.item4 {
  grid-area: four;
}
.item5 {
  grid-area: five;
}
.item6 {
  grid-area: six;
}
.item7 {
  grid-area: seven;
}
.item8 {
  grid-area: eight;
}
.item9 {
  grid-area: nine;
}
.child {
  height: 200px;
  background: red;
}
.child img {
  width: 100%;
  height: 100%;
}